6

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

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

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

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

*编辑（解决方案） - 这是我找到的关于该主题的最佳文章。不错的方法！

4

3 回答 3

2

这里的正确答案是通过使用“填充底部技巧”来防止垂直回流。要使这项技术发挥作用，您必须事先知道图像的比例。

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

于 2014-12-22T15:58:59.540 回答
0

这是一种方法。这不是很棒，但有效。 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>
于 2012-11-19T22:16:16.623 回答
-3

我不会去掉高度和宽度属性，只是尝试将它们设置为自动。

于 2012-11-19T16:45:47.330 回答