gpt4 book ai didi

javascript - 在浏览器布局中为响应式图像保留空间(防止回流)

转载 作者:技术小花猫 更新时间:2023-10-29 11:44:38 26 4
gpt4 key购买 nike

我一直在进行更改以使我的网站更具响应性,总的来说,这很顺利。但是,我遇到了一个问题:

以前,我总是在 img 元素上使用 height 和 width 属性,以便在浏览器加载图像时在布局中保留空间。这可以防止布局在浏览器中晃动加载并计算图像所需的空间。

然而,在通过使用 max-width: 100% 并删除高度和宽度属性使我的图像更具响应性之后,浏览器不再为图像保留空间(因为它不再因为我无法明确告诉它,所以提前知道图像的高度或宽度)

我的目标是让响应式图像在初始加载时也能在页面布局中占据适当的空间。有谁知道这个的解决方案吗?

*编辑(解决方案) - this is the best article I have found on the topic .不错的方法!

最佳答案

这里的正确答案是通过使用“padding-bottom trick”来防止垂直回流。要使此技术发挥作用,您必须事先知道图像的比例。

感谢 Anders M. Anderson 发表了一篇关于该主题的优秀文章:http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

关于javascript - 在浏览器布局中为响应式图像保留空间(防止回流),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13458297/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com