在HTML/CSS中,img的"填充底层黑客"仍然是确保无需重新流动的最佳方式吗？

Question

在2017年,"填充底部黑客"(用Image Height / Image Width * 100%填充底部包裹img在div中)仍然是确保空间被分配用于响应(百分比宽度)图像以避免重新流动的最佳方式吗？

奖励:如果img标签指定了width和height属性,为什么浏览器本身无法计算空间.比如,<img src="..." height="100" width="200">？它拥有所需的所有信息,不是吗？

"padding-bottom 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 正在添加一个内在大小属性 EG：<img intrinsicsize="400x300" style="width: 100%">

此属性允许开发人员指定媒体元素的固有大小 ( <img>, <video>, <svg:image>)。使用此属性，媒体元素将保持其纵横比。开发人员只需指定一个维度（百分比或像素值），另一个维度将立即计算，而不会导致视觉重流。