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

Posted 2023-02-16

【中文标题】CSS图像缩放以适应区域不扭曲

【英文标题】：CSS image scaling to fit within area not distort

【发布时间】：2011-07-19 03:57:23

【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

您不希望它们保持纵横比？

【参考方案1】：

希望我不会迟到；）

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

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

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

这应该可以解决问题。

【讨论】：

这是您需要定义父元素大小时使用的理想 css。

【参考方案2】：

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

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

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

【讨论】：

这是完美的家伙。查看链接并解决您的图像失真问题。

【参考方案3】：

你应该尝试使用这个：

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”);

【讨论】：

这根本不正确。这怎么能被投票 17 次？图像由此清楚地缩放，原始问题指出应该隐藏。

人们赞成这个答案，因为我们发现这个问题在谷歌上搜索了一些不同的东西，这对我们的情况很有效；）

【参考方案4】：

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

我可能把你的问题解释错了，但试试这个，看看它是否能产生你想要的效果。

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

【讨论】：

是和不是。我希望它缩放图像直到宽度的高度（先出现）是容器的高度，然后裁剪其余部分。

【参考方案5】：

这对我有用：

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

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

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

【讨论】：

是否可以使用这种方法使图像居中？那真的很酷。

【参考方案6】：

这在 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');

【讨论】：

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

也许我在没有测试的情况下对某件事进行投票是很顽皮的......只是测试了它。效果很好。

--对我来说，这会扭曲图像。--哦，等等，实际上并没有！我的视力被欺骗了。