Question

目标

我需要一个图片，当它完成加载并且适合容器内时，不会重新排列我的布局。

原理

重新排列部分：不采取任何操作，我只会看到带有alt属性文本的小块。当图像加载完毕后，文本将替换为实际内容，使布局突然重新排列。这会降低用户体验 - 许多事情会立即在屏幕上发生，等等。
至于容纳在容器内 - 图像可能非常大。就像，6000x3000美国宇航局扫描大。

显而易见的方法

我指定了图片的width和height。所以，基本上，我有<img src="640" height="480" alt="whatever"/>并且它立即知道它的大小，所以布局不会重新排列。

然后我添加了img { max-width: 100%; }。

但这搞砸了大图像的宽高比 - 它从容器和高度的宽度来自height="..."图像属性。

所以我将该规则更改为img { max-width: 100%; height: auto; }，就像StackOverflow和互联网上的大量帖子一样。

这有效......但第一个问题反击了。我的图片现在使用CSS将其高度设置为auto，忽略其height="..."属性，并最初再次呈现为未经过尺寸调整的alt文字。

我尝试过的其他事情

我尝试过对容器应用限制。没有多大帮助，图像只是溢出。
我尝试使用Javascript，只在加载图片后添加height: auto规则。这种方法出乎意料地糟糕：在图像完成后，它会以错误的宽高比闪烁一段时间，然后由于height: auto（Firefox）而突然发生纠正。我也不想隐藏它来加载时间，因为它可以被动画化并且让观众长时间看不到内容是不可接受的。
我已经考虑过使用background-size，但我很难保持div的宽高比。
我不确定object-fit。在这种情况下似乎很有帮助，但根据caniuse.com，它还没有完全准备好生产。

这似乎是一个基本问题。有没有简单的方法可以同时实现这两个目标？

Answer 1

制作背景尺寸：封面;它会在保持纵横比的同时尽可能地拉伸图像。

身高最小高度：100％; - 这将使其成为其父div的100％。

与宽度最小宽度相同：100％;

Answer 2

我使用padding-top技巧：http://jsfiddle.net/mtfondvy/4/

让它发挥作用

图像及其容器根据窗口大小填充最大640x480块，同时保持其纵横比。可以使用相同的技术来调整div的宽高比。

<强> HTML ：

<div class="outer" style="width: 640px">
    <img class="inner" src="http://placekitten.com/g/640/480"/>
    <div style="padding-top: calc(100% * 480 / 640)"></div>
</div>
<p>Whatever</p>

注意480和640：calc(100% * 480 / 640)用于计算div的宽高比。即使以这种方式编写，它仍然可以很容易地与常见的服务器端和客户端HTML模板一起使用。优点是它不依赖于Javascript或服务器端计算。

<强> CSS ：

.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.outer {
    max-width: 100%;
    position: relative;
}

指定初始尺寸的流体图像

目标

原理

显而易见的方法

我尝试过的其他事情

2 个答案: