我一直在进行更改以使我的网站更具响应性，总的来说，一切进展顺利。然而，我遇到了一个问题：
之前，我总是在 img 元素上使用 height 和 width 属性，以便在布局中预留空间在浏览器加载图像时用于图像。这可以防止在浏览器加载和计算图像所需空间时布局出现抖动。
然而，在使我的图像更具响应性之后，通过使用max-width: 100%并取出高度和宽度属性，浏览器不再为图像保留空间（因为它不再提前知道图像的高度或宽度，因为我无法明确告诉它）
我的目标是让响应式图像在初始加载时也能在页面布局中占据适当的空间。有谁知道这个问题的解决方案？
*编辑（解决方案） - 这是我发现的关于该主题的最好的文章 http://web.archive.org/web/20161120085902/http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/。好方法！
这里的正确答案是通过使用“padding-bottom技巧”来防止垂直回流。为了使这项技术发挥作用，您必须提前知道图像的比例。
感谢 Anders M. Anderson 发表了一篇关于该主题的精彩文章：http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/ http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
