使用CSS调整图像大小以适应容器

我正在寻找一种使用CSS调整元素大小的解决方案：

必须保持横向、方形和纵向的纵横比 图像 必须在高端收缩和低端拉伸场景中工作 除了Chrome/FF/Safari/Opera之外，还必须在IE 10/Edge中工作，IE 8+支持很好

---

我在这里找到的或类似的解决方案都不能按要求工作。使用object-fit:contain在IE中不起作用。没有javascript是否可行？

您只需要为img元素设置最大宽度和最大高度。 如果您的图像比容器大，这个技巧应该以正确的比例调整图像的大小

我举了一个例子：

img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: auto;
}

---

祝你好运

当图像分辨率较低时，即需要拉伸以填充任何可用空间时，这不起作用。非常正确。这就是为什么我在评论中说，如果你的图片比容器大的话。。但是谢谢你指出这一点！