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

Question

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

1. 必须保持横向和方和纵向的宽高比 图像
2. 必须在高档（缩小）和缩小（拉伸）场景中工作
3. 除了Chrome / FF / Safari / Opera还必须在IE 10 / Edge中运行（IE 8+支持很高兴）

我在此处找到的解决方案（例如this或this）都不能按要求运行。使用object-fit: contain的{​​{3}}在IE中不起作用。没有javascript它可行吗？

Answer 1

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

我在这里有一个例子：

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

http://codepen.io/Himechi90/pen/MaoEWg

祝你好运！