Javascript 如何设置图像的全宽（100%）和未知高度的样式，使其不'；不流行

我正在建立一个站点，其中大多数图像都会完全出血，也就是说，它们的宽度：100%。我遇到了一个问题，在加载之前，图像的高度为0，这会导致站点的元素大量跳转

• 我不能将其留空，因为在加载之前它是0
• 如果将高度设置为像素值，则无法正确缩放
• 我无法将其设置为100%，因为它使用了 包含元素

我想做的事可能吗？我可以想办法在第一个图像加载后使用javascript解决这个问题，但看起来不是很优雅

救命啊

加载开始后，此文本将被向下推

加载开始后，此文本将被向下推

加载开始后，此文本将被向下推

img{宽度：100%；}
#自动{高度：自动；}
#固定{高度：640px；}
#百分比{高度：100%；}

---

如果浏览器尚未下载图像，并且您尚未在

img

标记中指定图像的高度，则浏览器无法知道在页面中为其保留的高度

---

您最好在这些图像上设置一个安全的

min height

，以便在加载时至少将“pop”最小化。

您最好使用一个包装

div

元素，该元素在某种意义上是流动的，与图像的纵横比相匹配

如下图所示：

HTML

<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/1" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/2" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/3" />
</div>
<p>This text will get pushed down after load starts</p>

---

小提琴：这里没有解决方案

不过，也有可能的答案

如果加载了关于每个图像的JSON有效负载信息，并使用

document.body.getBoundingClientRect（）.width

，则可以使用主体的宽度（或容器的宽度）和关于图像的元数据来保留该高度

当然，你必须加载JSON作为你在网站上做的第一件事之一（或者将其烘焙到页面中，或者将其保存为JS对象，保存在包含的文件中），并且你必须保存你想要使用的每个图像的数据

…此外，您可以显示SVG（可以非均匀拉伸，也可以缩放和字母框），而不是什么都不显示，在加载预期图像（将以JS加载）时，您可以将SVG的位置设置为绝对（在页面中的同一点），并开始将其淡入背景，在SVG占用的空间中，图像（将附加到DOM中）出现交叉淡入时

或者，你可以让它们全部滑入，或者放大，而不是“弹出”。。。或者如果你真的想让人讨厌，缩小

对于你认为是一个简单问题的事情，可能是过火了……很可能是这样

---

悲哀的事实是没有解决方案，但令人高兴的现实是，你可以解决稍微不同的问题，使最初的问题看起来很新奇。

如果我得到了你的要求，我认为你可以使用

min height

属性来预留空间。这不起作用，因为我需要灵活的预留高度。很好的解决方案。非常感谢。

<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/1" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/2" />
</div>
<p>This text will get pushed down after load starts</p>
<div class="image-wrapper">
<img src="http://lorempixel.com/1280/640/cats/3" />
</div>
<p>This text will get pushed down after load starts</p>

.image-wrapper {
    position:relative;
    height:0;
    padding-bottom:50%; /* aspect ratio of the image ( ( 640 / 1280 ) * 100% ; ) */
}
.image-wrapper > img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}