Question

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

之前，我总是在img元素上使用高度和宽度属性，以便在浏览器加载图像时为图像保留空间。这可以防止布局在浏览器中抖动加载并计算图像所需的空间。

然而，通过使用max-width: 100%并取出高度和宽度属性，使我的图像更具响应性后，浏览器不再为图像保留空间（因为它不再知道图像的高度或宽度由于我无法明确告诉它，所以要提前预定）

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

*编辑（解决方案） - this is the best article I have found on the topic。好方法！

Answer 1

这里的正确答案是使用＆＃34; padding-bottom技巧＆＃34;来防止垂直回流。要使此技术有效，您必须事先知道图像的比例。

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

Answer 2

这是一种方法。这不是很棒，但很有效。 http://jsfiddle.net/78Lvc/11/

我将图片标记更改为：

<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/>

您会注意到我添加了一些属性和onload。您必须在代码中或手动添加属性。你需要高度和宽度的原因是因为你需要知道图像的高度来计算JS中所需的空间。

然后内联，我有这个代码：

<script>
    //get the width of the browser right now
    var containerWidth = document.body.offsetWidth;
    //get the attributes that we have specified for this image
    var imgWidth = document.getElementById("img").getAttribute("imgWidth");
    var imgHeight = document.getElementById("img").getAttribute("imgHeight");

    //since the img is to be 50% of the container width
    var widthRatio = containerWidth / imgWidth / 2 ;

    //now set the height of the image
    document.getElementById("img").style.height = (imgHeight * widthRatio) + "px";

    //once the image has actually loaded, run this
    function fixMyWidth(){
        //this will make it 'responsive' again
        document.getElementById("img").style.height = "";
        document.getElementById("img").style.width = "";
    }
</script>

Answer 3

我不会将高度和宽度属性输出，只需尝试将它们设置为自动。

在浏览器布局中为响应图像保留空间（防止回流）

3 个答案: