问题描述
在 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%">
https://www.chromestatus.com/feature/4704436815396864
这篇关于在 HTML/CSS 中是“padding-bottom hack".对于 img&#39;s 仍然是确保不回流的最佳方法吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!