Question

有没有办法使用CSS或其他方法使图像适合某个区域。让我们说我有多个不同大小的图像，我希望它们都适合150px乘100px的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

这对我有用：

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

它试图对容器进行“完美贴合”，在保持图像比例的同时伸展自身以适应边界。尚未使用IE6进行测试。

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

Answer 5

希望我参加聚会不迟于;）

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

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

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

这应该可以解决问题。

Answer 6

我知道这是一个老字号，但是因为我是在寻找同一问题的答案时发现它的，所以我猜它也可能对其他人有用。

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

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

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

6 个答案: