自定义style样式属性,实现完美aspect ratio纵横比

x
xiezixing
发布于 16 天前

这也许是最酷的想法!使用自定义样式属性实现。

Thierry Koblentz最近写了这个(由于Thierry的网站已死,因此删除链接。),感谢SérgioGomes的创意。

要使用它,您可以将自定义属性的作用域设置为所需元素的权限:

<div style="--aspect-ratio:815/419;">
</div>

<div style="--aspect-ratio:16/9;">
</div>

<!-- even single value -->
<div style="--aspect-ratio:1.4;">
</div>

样式化的CSS是完美中的完美:

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
  object-fit: cover;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

请允许我引用蒂埃里的分步说明:

  • 我们使用[style*="--aspect-ratio"]钩子来定位适当的盒子

  • 无论是否支持自定义属性,我们都会拉伸内部框

  • 我们确保图像的高度来自其固有比率而不是其height属性

  • 我们将容器设置为包含块的样式(因此,内部框会引用该父级的位置)

  • 我们创建了一个与“ padding hack”一起使用的伪元素(正是该元素创建了宽高比)

  • 我们使用calc()var()根据自定义属性的值计算填充

  • 我们对内部框进行样式设置,使其匹配其包含块的尺寸

例子:比如我想设置一个16/9纵横比的海报图,使其中的图片自适应,并且匹配纵横比:

<div class="card-image" style="--aspect-ratio:16/9;">
  <img
    class="img rounded"
    src="https://image.querydata.org/beecms/images/5fcf1ae4c110c27774f64649-atLwCDI4fWZrMlIpaGL1YTLyiGq7ND_large-1.jpg" />
</div>

样式如下:

相关文章推荐
评论区
暂未开放
相关文章推荐