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

标签 javascript image css browser frontend

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

以前,我总是在 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/

相关文章:

javascript - 如何在 jQuery 中显示前 n 个元素?

javascript - 如何在 Angular html 页面中添加动态数组索引值

php - glob php - 从目录返回所有类型的图像

javascript - 如何使用 javascript 测试 URL 是否是图像请求超时的有效图像?

jquery - 如何使用任何 UI Kit 来设计 Form 元素的样式?

javascript - 如何克隆选定的div

javascript - 插入javascript在IE6中不起作用但在ie8中起作用

python - ModelForm 如果为空则禁用 imageField

html - 在一个 div 中居中一个特定大小的 div

php - 使用自定义元框在首页 Wordpress 上显示警报