CSS 图像缩放以适应区域不失真

CSS image scaling to fit within area not distort

提问by RIK

Is there a way with CSS or otherwise of making an image fit within an area. Lets say I have multiple images of different sizes and I want them all to fit within a div of 150px by 100px. I don't want to scale the images though as some may be tall and others narrow I simply want them to fit within this area with the rest hidden.

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

I thought about using overflow:hiddenbut it appears to not be hidden in IE6.

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

Any ideas?

有任何想法吗？

回答by Sang Suantak

You should try using this:

你应该尝试使用这个：

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

Edit: Looks like IE6 doesn't support max-width and max-height properties. However, you can implement the workaround given here: max-width, max-height for IE6

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

Excerpt (in case linked article stops working):

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

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

回答by Jimmy Cleveland

When you say "fit within this area" with the rest hidden I feel like you want the image to not be scaled down at all and basically crop off any excess.

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

I might be interpreting you're question wrong, but try this and see if it produces the effect you're looking for.

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

.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>

回答by Dan

This won't work in IE6 (as required by the OP), but for completeness you can achieve the required effect on newer browsers using CSS3's background-size:coverand setting the image as a centered background image. Like so:

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

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

回答by Sheharyar

This worked for me:

这对我有用：

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

It tries to do a "perfect fit" of the container, stretching itself to fit the bounds while maintaining image proportion. Haven't tested it with IE6.

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

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

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

回答by Georgi Vatsov

I know this is an old one, but because I found it in search of answer for the same question, I guess it could be of use for someone else, too.

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

Since the answers were posted, CSS property object-fit was brought to us. It does exactly what was once requested in the question.

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

For reference: https://www.w3schools.com/css/css3_object-fit.asp

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