css - 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 属性。但是，您可以实施此处给出的解决方法：max-width, max-height for 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

这在 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 4

我知道这是一个旧的，但因为我在寻找相同问题的答案时找到了它，我想它也可能对其他人有用。

自从发布了答案，CSS 属性 object-fit 就被带到了我们面前。它完全符合问题中的要求。

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

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;
 }

这应该可以解决问题。