html - 指定初始大小的流体图像

Question

目标

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

理由

1. 重新排列部分:在不采取任何操作的情况下，我只会看到一个小块，其中包含来自 alt 的文本。属性。图片加载完成后，文本会被替换为实际内容，使布局突然重新排列。这会降低用户体验 - 许多事情会同时出现在屏幕上，等等。
2. 至于适合装在容器内——图像可以非常大。喜欢，6000x3000 NASA 大扫描。

显而易见的方法

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

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

但这搞砸了大图像的宽高比——它从容器中获取宽度，从height="..."中获取高度。图片属性。

所以我将该规则更改为 img { max-width: 100%; height: auto; } ，就像 StackOverflow 和 Internet 上的许多帖子所建议的那样。

这行得通...但是第一个问题反击了。我的图像，现在它的高度设置为 auto使用 CSS，忽略它的 height="..."属性并最初呈现为未调整大小的 alt再次发短信。

我尝试过的其他事情

• 我试过对容器施加限制。没有多大帮助，图像只是溢出。
• 我尝试通过添加 height: auto 来使用 Javascript规则仅在图像加载后。这工作出乎意料地糟糕:图像完成后，它会以错误的宽高比闪烁一小段时间，然后突然自行纠正，这要归功于height: auto。 (火狐)。我也不想在加载时隐藏它，因为它可以是动画的，让观众长时间看不到内容是 Not Acceptable 。
• 我考虑过使用 background-size , 但我很难保持其 div 的纵横比.
• 我不确定 object-fit .在这种情况下它似乎很有帮助，但根据 caniuse.com ，它还没有完全投入生产。

这似乎是一个初级问题。有什么简单的方法可以同时实现这两个目标吗？

Answer 1

制作背景尺寸:封面；它会在保持宽高比的同时尽可能宽地拉伸(stretch)图像。

高度为min-height:100%; -这将使它成为其父 div 的 100%。

与宽度相同 min-width:100%;