如何将 "image is-4by1" class 添加到 bulma CSS 框架

Question

扩展（使用 scss）Bulma CSS 框架以添加 class "image is-4by1" 的正确方法是什么，它的行为类似于其他具有比率的 Bulma 响应图像（https://bulma.io/documentation/elements/image/).

Answer 1

我会查看有关自定义 Bulma 的文档，了解如何进行 Sass 设置。 https://bulma.io/documentation/customize/concepts/

如果您看一下 Bulma 中的图像文件，您会发现它们是如何添加比率的。

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%

或者在 scss 中

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

最终这将编译为：

.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%;
}

如何将 "image is-4by1" class 添加到 bulma CSS 框架

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

css

sass

bulma