对于具有不同纵横比的响应式图像，最小化累积布局偏移的好方法是什么？

Question

如果您有一个<picture>元素在不同断点处具有不同纵横比的图像源，那么通过在 CSS 中使用纵横比和媒体查询来最小化 CLS 的最佳方法是什么？

Answer 1

对于<picture>，你应该罚款，只要每个<source>图像在你的响应图像片段相同的纵横比：

<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>

同时，您可以height通过padding-top CSS hacks提供每个<picture>断点不同的媒体查询。

Answer 2

支撑源元素维度属性是现在的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 中进行跟踪。