Question

我正在建立一个大部分图像全出血的网站，也就是宽度：100％。我有一个问题，图像的高度为0，直到加载，这导致网站的元素跳了很多。

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

我正在尝试做什么？我可以想办法在第一次加载图片后使用javascript解决这个问题，但看起来并不优雅。

帮助！

<img src="http://lorempixel.com/1280/640/cats/1" id="auto" />
<p>This text will get pushed down after load starts</p>
<img src="http://lorempixel.com/1280/640/cats/2" id="fixed" />
<p>This text will get pushed down after load starts</p>
<img src="http://lorempixel.com/1280/640/cats/3" id="percentage" />
<p>This text will get pushed down after load starts</p>

img { width:100%; }
#auto { height: auto; }
#fixed { height: 640px; }
#percentage { height: 100%; }

JSFiddle

Answer 1

你能做的最好的事情就是拥有一个包装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>

<强> CSS

.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%;
}

小提琴：http://jsfiddle.net/Varinder/m8dFM/1/

Answer 2

如果浏览器尚未下载图像，并且您未在img标记中指定图像的高度，则无法知道在页面中为其保留的高度。

您可以做的最好的事情是在这些图片上设置一个安全的min-height，以便在加载时至少最小化“pop”。

Answer 3

这里没有解决方案。

但是有可能的答案。

如果您加载了有关每个图像的JSON有效信息，并使用了document.body.getBoundingClientRect().width，那么您可以使用正文的宽度（或容器的宽度）和图像的元数据来保留这么高的高度。 / p>

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

...而且，不是什么都不显示，你可以显示一个SVG（可以非均匀拉伸，也可以缩放和letterboxed），这样就可以加载你想要的图像（可以加载在JS）中，您可以将SVG的位置设置为绝对（在页面中的同一点），并开始将其淡入背景，同时在图像中交叉淡化，这将在空间中附加到DOM SVG占据了......

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

对于你认为是一个简单问题的东西来说可能有些过分......而且它很可能就是。

可悲的事实是，没有解决方案，但幸福的现实是，你可以解决稍微不同的问题，使初始问题看起来很新颖。

如何为具有完整（100％）宽度和未知高度的图像设置样式，使其不会弹出

3 个答案: