在 HTML/CSS 中是“padding-bottom hack".对于 img's 仍然是确保不回流的最佳方法吗? [英] In HTML/CSS is the "padding-bottom hack" for img's still the best way to ensure no re-flow?

问题描述

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

(更多关于填充底部技巧:

In 2017, is the "padding-bottom hack" (wrapping an img in a div with a padding bottom of Image Height / Image Width * 100%) still the best way to ensure space is allotted for a responsive (percentage-width) image to avoid a re-flow?

(More on padding-bottom trick: https://www.smashingmagazine.com/2013/09/responsive-images-performance-problem-case-study/#the-padding-bottom-hack)

BONUS: If the img tag specifies a width and height attribute, why couldn't the browser compute the space natively. Eg, <img src="..." height="100" width="200">? It has all the information it needs, no?

The "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;
}

解决方案

Chrome is adding an intrinsic-size attribute, EG: <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

这篇关于在 HTML/CSS 中是“padding-bottom hack".对于 img's 仍然是确保不回流的最佳方法吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！