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

Question

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

1. 横向和方形和纵向必须保持纵横比 图片
2. 必须在高档（收缩）和低档（拉伸）场景中工作
3. 除了 Chrome/FF/Safari/Opera 还必须在 IE 10/Edge 中工作（IE 8+ 支持很不错）

我在这里找到的所有解决方案（如this 或this）都不能按要求工作。使用 object-fit: contain 的 The best one 在 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

祝你好运！