CSS 图像缩放以适应区域而不扭曲

Question

有没有办法使用 CSS 或其他方式使图像适合某个区域。假设我有多个不同尺寸的图像，我希望它们全部适合在 150 像素 x 100 像素的 div 内。我不想缩放图像，因为有些图像可能很高，有些可能很窄，我只是希望它们适合该区域，而其余部分则隐藏。

我考虑过使用 overflow:hidden 但它似乎在 IE6 中没有隐藏。

有什么想法吗？

Answer 1

你应该尝试使用这个：

img{
  width: auto;
  max-width: 150px;
  height: auto;
  max-height: 100px;
}

编辑：看起来 IE6 不支持 max-width 和 max-height 属性。但是，您可以实施此处给出的解决方法： IE6 的最大宽度、最大高度

摘录（以防链接的文章停止工作）：

img {
  max-height: 100px;
  max-width: 100px;
  width: expression(document.body.clientWidth > 150? “150px”: “auto”);
  height: expression(document.body.clientHeight > 100? “100px”: “auto”);
}

Answer 2

当你说“适合这个区域”而其余部分隐藏时，我觉得你希望图像根本不按比例缩小，并且基本上剪掉任何多余的部分。

我可能会解释你的问题是错误的，但试试这个，看看它是否能产生你想要的效果。

.img-holder {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}
.img-holder img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

<div class="img-holder">
  <img src="http://img.playit.pk/vi/dH6NIe7wm4I/mqdefault.jpg" />
</div>

Answer 3

我知道这是一个旧问题，但因为我发现它是为了寻找同一问题的答案，所以我想它也对其他人有用。

自从答案发布后，CSS 属性 object-fit 就被带到了我们身边。它完全符合问题中曾经要求的内容。

供参考：https://www.w3schools.com/css/css3_object-fit.asp< /a>

Answer 4

这在 IE6 中不起作用（按照 OP 的要求），但为了完整起见，您可以使用 CSS3 的 background-size:cover 并将图像设置为居中背景图像在较新的浏览器上实现所需的效果。就像这样：

div { 
  width:150px;
  height:100px;
  background-size:cover; 
  background-position:center center; 
  background-repeat:no-repeat; 
  background-image:url('somepic.jpg');
}

Answer 5

这对我有用：

img.perfect-fit {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}

它试图对容器进行“完美适配”，在保持图像比例的同时拉伸自身以适应边界。没有用IE6测试过。

JSFiddle： http://jsfiddle.net/4zudggou/

Answer 6

希望我没有迟到；）

img {
      width:inherit;
      height:inherit;
      object-fit: cover;
}

如果您希望显示完整图像，请使用下面的代码

img {
      width:inherit;
      height:inherit;
      object-fit: contain;
 }

应该可以解决问题。