html - 取消设置最大宽度 :100% and height:auto;

Question

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

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

我创建了一个fiddle，但是由于缓存，这里看不到加载问题；因此，我从 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 属性的更多信息