对于不同宽高比的响应式图像，有什么好方法可以最小化累积布局偏移？

Question

如果您有一个

<picture>

元素，其图像源在不同的断点处具有不同的宽高比，那么通过在 CSS 中使用宽高比和媒体查询来最小化 CLS 的最佳方法是什么？

Answer 1

对于

<picture>

，只要每个 <source> 图像在响应式图像片段中具有相同的宽高比，您就应该

fine

：

<img width="1000" height="1000"
       src="puppy-1000.jpg"
    srcset="puppy-1000.jpg 1000w,
            puppy-2000.jpg 2000w,
            puppy-3000.jpg 3000w"
           alt="Puppy with balloons"/>

对于每个

<picture>

具有不同纵横比的

<source>

，浏览器正在等待为每个 <source> 推荐宽度/高度的

标准化

，以用于艺术指导用例：

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300">
  <img src="https://via.placeholder.com/1500x300" width="1500" height="300">
</picture>

同时，您可以通过

padding-top CSS hacks

提供 height，每个

<picture>

断点具有不同的媒体查询。

Answer 2

支持 dimension 属性的源元素是 now HTML 标准的一部分 — https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

标准化与已提供的示例实现@addyo相匹配。

对于

<picture>

的艺术指导用例，其中每个

<source>

具有不同的纵横比，每个

<source>

都可以提供自己的

width

和

height

值。

<picture>
  <source srcset="https://via.placeholder.com/600x279" media="(max-width: 599px)" width="600" height="279">
  <source srcset="https://via.placeholder.com/1500x300" media="(max-width: 991px)" width="1500" height="300">
  <img src="https://via.placeholder.com/1500x300" width="1500" height="300">
</picture>

浏览器支持的实现正在正在进行中，并且应该很快可以在 caniuse 中进行跟踪。

Answer 3

根据 caniuse 的说法，所有主流浏览器现在都已经实现了标签的 width 和 height 值。

在我当前的项目中，我实现了一个响应式图像组件，可以防止累积布局偏移。这里描述的技术正是对我有用的。