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

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属性.但是,您可以实现此处给出的解决方法:IE6的max-width,max-height

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 {
      width:inherit;
      height:inherit;
      object-fit: cover;
}

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

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

这应该可以解决问题。

Answer 6

这对我有用:

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

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

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