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

Question

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

1. 必须保持横向和正方形和纵向的纵横比图片
2. 必须在放大(缩小)和缩小(拉伸(stretch))场景中工作
3. 除了 Chrome/FF/Safari/Opera 还必须在 IE 10/Edge 中工作(IE 8+ 支持很好)

我在这里找到的所有解决方案(如 this 或 this)均无法按要求工作。 The best one使用object-fit: contain在 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

祝你好运!