取消设置最大宽度：100％和高度：自动;

Question

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

1. 有没有办法在不破坏正常占位符行为的情况下使用max-with 100 / height自动技术？
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

找到有关对象适合属性的更多信息