javascript - 在 HTML/CSS 中，img 的 "padding-bottom hack"仍然是确保不重流的最佳方式吗？

Question

在 2017 年，“padding-bottom hack”(将 img 包装在 div 中，填充底部为 Image Height / Image Width * 100%)仍然是确保为响应式(宽度百分比)图像分配空间以避免避免的最佳方法回流？

(更多关于填充底部技巧:https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack)

奖励:如果 img 标签指定了宽度和高度属性，为什么浏览器不能本地计算空间。例如，<img src="..." height="100" width="200"> ？它拥有所需的所有信息，不是吗？

“填充底部 hack”:

html

<div class="image-wrapper">
  <img class="image" src="...">
</div>

CSS

.image-wrapper {
    height: 0;
    padding-bottom: 50%;
    position: relative;
}
.image {
    width: 100%;
    position: absolute;
}

Answer 1

Chrome 正在添加一个 intrinsic-size 属性，例如:<img intrinsicsize="400x300" style="width: 100%">

This attribute allows developers to specify the intrinsic size of a media element (<img>, <video>, <svg:image>). With this attribute media elements will maintain their aspect ratios. Developers need only specify one dimension, either a percentage or pixel value, and the other dimension will be computed immediately without causing a visual re-flow.

https://www.chromestatus.com/feature/4704436815396864