取消设置最大宽度：100% 和高度：自动；

Question

在我的项目中，容器内的所有图像都具有 css 属性 max-width: 100%; 和 height: auto;，以便在视口缩小且容器缩小时缩小图像。 这是可行的，但要付出的代价是浏览器在不加载图像以获取尺寸的情况下无法正确绘制页面。 当我通过<img width=100 height=100 /> 嵌入图像时，浏览器通常会保留空间并呈现页面的其余部分。 一旦应用了上述 css，图像下方的站点内容就会“跳跃”，因为在加载过程中图像是 0x0px。 这引出了两个问题：

1. 有没有办法在不破坏正常占位符行为的情况下使用 max-with 100/height auto 技术？
2. 如果不是，对于某些应该不自动调整大小和正常加载的图像，在加载过程中使用正确大小的占位符，应用什么正确的类声明？我尝试了height: initial 和height: inherit，在这两种尝试中，图像在加载前仍然是0x0px，html height 属性被忽略。

我创建了一个小提琴，但是由于缓存，这里看不到加载问题；因此，我将代码从https://jsfiddle.net/yrx52avq/4/ 复制到http://www.testserver01.de/fiddle.php，并添加了延迟和无缓存选项。 重新加载页面：加载过程中会弹出红色框。绿色的没有。

Answer 1

在您的 CSS 中，请使用属性 object-fit:cover 或 object-fit:contain 尝试以下代码。此属性将调整您的图像大小以适合容器。

.container img {
  object-fit:cover;
  max-width:100%;
}

或

.container img {
  object-fit: contain;
  max-width:100%;
}

你可以从w3schools找到更多关于object-fit属性的信息