How to add "image is-4by1" class to bulma CSS framework

Question

What would be the proper way to extend (with scss) Bulma CSS framework to add class "image is-4by1" which will behave similar to other Bulma responsive images with ratios (https://bulma.io/documentation/elements/image/).

Answer 1

I’d take a look at the docs for customizing Bulma to see how to get Sass setup. https://bulma.io/documentation/customize/concepts/

If you take a look at the images file in Bulma, you can see how they add ratios.

https://github.com/jgthms/bulma/blob/master/sass/elements/image.sass

.image.is-4by1
  padding-top: 25%
  img,
  .has-ratio
    @extend %overlay
    height: 100%
    width: 100%

Or in scss

.image.is-4by1 {
  padding-top: 25%;
  img,
  .has-ratio {
    @extend %overlay;
    height: 100%;
    width: 100%;
  }
}

Ultimately this will compile to:

.image.is-4by1 {
  padding-top: 25%;
}

.image.is-4by1 img,
.image.is-4by1 .has-ratio {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
}