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

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

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

但是，在使用

max width:100%

并去掉高度和宽度属性后，浏览器不再为图像保留空间（因为它不再知道图像的高度或宽度，因为我无法明确告诉它）

我的目标是在页面初始加载时，使响应性图像在页面布局中占据适当的空间。有人知道这个问题的解决方案吗

---

*编辑（解决方案）-。好办法

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

下面是一种方法。这并不可怕，但很有效

我将图像标记更改为如下所示：

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

---

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

---

感谢Anders M.Anderson就此主题发表了一篇精彩的文章：

感谢您的回复，但将其设置为“自动”并不能解决问题。浏览器仍然没有为布局中的图像保留适当的空间。向我们展示您的HTML可能会对问题有所帮助。在看到决定图像大小的代码之前，我们无法真正知道如何提供帮助，当代码运行时，页面HTML和图像如何插入页面。您如何使网站响应？您是否根据浏览器的宽度和高度加载不同的样式表？@jfriend00，仅此而已，我不希望代码明确确定图像的大小，我希望浏览器根据图像的可用空间（这反过来又取决于屏幕大小）动态控制图像的大小。这就是为什么要使用“最大宽度：100%”技术。@davehale23，对于这些图像，我使用的唯一技术是“最大宽度：100%”技术，它使图像在其可用空间内缩放到其最大可能（成比例）大小。

<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>