在不拉伸的情况下将图像放入 div答案

【问题标题】：Fit image inside div without stretching在不拉伸的情况下将图像放入 div
【发布时间】：2023-03-12 02:16:01
【问题描述】：

我需要在不拉伸图像的情况下将图像放入 300x300 div 中。我在愤怒的帖子上看到了这个，这个页面上的滑块：

http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html

图像被剪裁但没有被拉伸。而不是使用最大宽度，最大高度。

我该怎么做？

【问题讨论】：

设置图片为div的背景图片？
stackoverflow.com/a/41895887/1400943 这是仅使用 css 的解决方案。

标签： html css image

【解决方案1】：

您链接到的网站上的那些图片是实际大小，所以简单的答案就是调整图片大小。

如果图像的宽度或高度恰好小于 300 像素，则您无法真正做到这一点，而无需“拉伸”图像，但您可以在不改变比例的情况下做到这一点，这就是我认为您的意思。

这是基本的想法：

<div><img></div>

如果您想使用 300px 作为最小宽度（您希望小图像需要更大），请尝试以下操作：

div {
    width:300px;
    height:300px;    
    overflow:hidden;
}
div img {
    min-width:100%;
}

演示：http://jsfiddle.net/Z47JT/

如果您想剪辑图像（因为您希望它们很大）但不放大它们，试试这个：

div {
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;
}
div img {
    position:absolute;
}

演示：http://jsfiddle.net/Z47JT/1/

如果需要，可以结合这两种技术。

另一种方法是在容器上简单地使用background-image，但是调整它的大小（如果您想拉伸较小的图像）将很困难，除非您使用不完全支持的background-size。否则，这是一个非常简单的解决方案。

【讨论】：

我想这就是我需要的，我会试试看。 brb
优秀。欢迎来到本站！回头见。
@WesleyMurch 我看到图像比 div 大。如果图像小于 div 有没有办法在不拉伸（损失质量）图像的情况下扩展它
不，没有办法提高图像的分辨率。如果它很小，你只能拉伸它。
这个怎么样：stackoverflow.com/questions/26553763/…。我希望图像采用其容器的形状以进行响应。

【解决方案2】：

使用弹性盒子解决方案

这里是html，

<div><img /></div>

添加样式

div{
   width:100%;
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div img{
  flex-shrink:0;
    -webkit-flex-shrink: 0;
    max-width:70%;
    max-height:90%;
}

【讨论】：

上面的 flexbox 解决方案效果很好，但不会放大图像（将其放大以适应）。它似乎只是缩小了我所经历的图像。

【解决方案3】：

简单的方法来做到这一点......

.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;

}

【讨论】：

太棒了！你拯救了我的一天。