CSS – Aspect Ratio

参考:

Youtube – Chrome 88 adds aspect-ratio and 2 awesome new devtool features!

MDN – aspect-ratio

W3Schools – How TO - Aspect Ratio

W3C – Aspect Ratios

深入前端之replaced element (W3C 一直讲到 replaced element 等, 它指的就是 img, svg 那些, 因为它们也有 aspect-ratio 概念)

 

前言

Material Design 鼓励使用 aspect ratio 来达到排版的一致性.

但要在 CSS 实现 aspect ratio 其实挺难的. 至少在 CSS4 之前是比较麻烦的.

CSS4 aspect-ratio

参考: MDN – aspect-ratio

<div class="box">div>

自动 height

.box {
  background-color: rgba($color: red, $alpha: 0.2);
  width: 160px; /* height auto become 90px */
  aspect-ratio: 16 / 9;
}

自动 width

.box {
  background-color: rgba($color: red, $alpha: 0.2);
  height: 90px; /* width auto become 160px */
  aspect-ratio: 16 / 9;
}

CSS4 只要一个属性 aspect-ratio 就可以了. 但是它的支持率不是很好.

几个月前 Safari 才支持. (此刻是 23-02-2022).

Before CSS4 Workaround

在古代就没有这个需求吗? 其实少. 经常看到 aspect ratio 都是图片. 而图片不需要 CSS 的帮助就有 aspect ratio 了.

默认 width, height 是图片原本的大小, 如果设置其中 1 边, 那么它就会按原来的比例缩小. 所以保留了图片的 aspect ratio.

要实现 aspect ratio 就有一些手法.

参考: W3Schools – How TO - Aspect Ratio

效果

HTML 结构

<div class="container">
  <div class="box">div>
div>

CSS style

.container {
  width: 400px;
}
.box {
  padding-top: calc(9 / 16 * 100%); /* 4:3 比例就写成 3/4 反写就对了 */
  background-color: rgba($color: red, $alpha: 0.2);
}

关键就是用 padding-top 来控制高度.

为什么 padding-top + percentage 会有这个效果呢? 

参考: MDN – padding

原来 padding + percentage 就会对标 containing block 的 width. 也就是 parent width. 所以比例就算出来了.

这个 workaround 并不全面, 他只能依赖 container 的 width, 而且如果 div 里面有内容的话会更难做.

当 aspect-ratio 遇上 Flex

<div class="flex-container">
  <div class="item1">item1div>
  <div class="item2">item2div>
div>

item2 用来撑高, item1 stretch 和 item2 一样高. 然后 item1 依据 aspect ratio 自动计算 width.

.flex-container {
  background-color: rgba($color: red, $alpha: 0.2);
  width: 800px;
  display: flex;
  align-items: stretch;
}

.item1 {
  aspect-ratio: 16 / 9;
  background-color: rgba($color: blue, $alpha: 0.2);
}

.item2 {
  height: 150px;
  background-color: rgba($color: blue, $alpha: 0.2);
}

效果

不管用, item1 没有保持 16:9.

为什么呢? 参考: MDN – Effects of Preferred Aspect Ratio on Automatic Sizes

如果我没有理解错的话, 应该是说不能 2 个都是自动的. item1 的 height 算是一个 auto height 了, 所以 width 就无效了. 这同样适用于 哦 (我就是遇到 img 的 aspect ratio 在 Flex 不起作用才研究 aspect-ratio 的)

(新)CSS

相关

标签