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

Question

有没有一种使用CSS或其他方式使图像适合于特定区域的方法。 假设我有多个不同大小的图像，并且我希望它们都适合150px x 100px的div中。 但是我不想缩放图像，因为有些可能很高，而其他则很窄，我只想使它们适合这个区域并隐藏其余部分。

我考虑使用overflow:hidden，但在IE6中似乎无法隐藏。

任何想法？

- RIK

---

你不想保持它们的纵横比吗？ - Šime Vidas

Answer 1

你应该尝试使用这个：

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

编辑：看起来IE6不支持max-width和max-height属性。但是，您可以实现此处给出的解决方法：在IE6中使用max-width、max-height

摘录（以防链接文章失效）：

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

- Sang Suantak

---

这简直是错误的。这怎么会得到17个赞？这张图片显然被缩放了，而原问题说多余的部分应该隐藏。 - Torsten Bronger

人们给这个回答点赞，是因为我们在谷歌搜索一个略微不同的问题时发现了它，而且它恰好适用于我们的情况。;) - robermorales

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>

- Jimmy Cleveland

---

是的和不是的。我想要发生的是，它将缩放图像，直到高度或宽度（以先出现的为准）与容器相同，然后裁剪剩余部分。 - RIK

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

- Dan

---

学到了新东西！谢谢 :-) - user651390

也许我有点淘气，没有测试就点赞了某个东西... 刚刚测试了一下，运行得非常好。 - user651390

对我来说，这扭曲了图像。哦等等，实际上并没有！我的视觉被愚弄了。 - donquixote

Answer 4

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

自从那些答案发布以来，CSS属性object-fit被带给了我们。它正是曾经在问题中要求的内容。

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

- Georgi Vatsov

---

这太完美了，伙计们。点击链接解决你们的图像失真问题。 - John

Answer 5

这对我有效：

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

它试图实现容器的“完美适应”，在保持图像比例的同时将自身拉伸以适应边界。尚未在IE6中测试。

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

- Sheharyar

---

使用这种方法可以将图像居中吗？那真的很酷。 - Darkhogg

Answer 6

希望我没有迟到 ;)

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

但是，如果您想显示完整的图像，请使用以下代码

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

这应该能解决问题。

- N Djel Okoye

---

这是在需要定义父元素大小时使用的理想CSS。 - AutoBaker