如何在div内放置图像（img）并保持纵横比？

我有一个48x48的div，并且里面有一个img元素，我想将它放入div中而不丢失任何部分，同时保持比例，是否可以使用html和css实现？

如果您在编写CSS时不知道图像的尺寸，则需要一些JavaScript来防止裁剪。

HTML和JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

的CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

如果您使用JavaScript库，则可能要利用它。

使用max-height:100%; max-width:100%;了DIV内的图像。

不幸的是max-width + max-height不能完全覆盖我的任务...所以我找到了另一个解决方案：

要在缩放时保存图像比例，还可以使用object-fitCSS3属性。

有用的文章：使用CSS3控制图像长宽比

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

坏消息：不支持IE（我可以使用）

仅使用CSS：

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

的HTML

<div>
    <img src="something.jpg" alt="" />
</div>

的CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

这将使图像展开以填充其父级，其大小在divCSS中设置。

我遇到了很多问题才能使它正常工作，我发现的每个解决方案似乎都不起作用。

我意识到我必须将div显示设置为flex，所以基本上这是我的CSS：

div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}

试试CSS：

img {
  object-fit: cover;
  height: 48px;
}

对我而言，以下CSS可以工作（在Chrome，Firefox和Safari中测试）。

有很多东西一起工作：

• max-height: 100%;，max-width: 100%;和height: auto;，width: auto;将img比例缩放到最先达到100％的尺寸，同时保持宽高比
• position: relative;在容器中，position: absolute;在子容器中，top: 50%;以及left: 50%;img在容器中的左上角并居中
• transform: translate(-50%, -50%); 将img向左和顶部移动一半大小，从而将img在容器中居中

CSS：

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

将照片设置为背景图像将使我们对大小和位置有更多的控制权，而img标签则可用于其他目的...

在下面，如果我们希望div与照片具有相同的长宽比，则placeholder.png是一个小的透明图像，其长宽比与photo.jpg相同。如果照片是正方形，则是1px x 1px的占位符，如果照片是视频缩略图，则是16x9的占位符，依此类推。

针对该问题，请使用1x1占位符来保持div的平方比，并使用背景图像background-size来保持照片的宽高比。

我使用过，background-position: center center;因此照片将在div中居中。（将照片与垂直中心或底部对齐会使img标签中的照片变得难看。）

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

为避免额外的http请求，请将占位符图像转换为data：URL。

<img src="data:image/png;base64,..."/>

您可以将类“ img-fluid”用于较新的版本，即Bootstrap v4。

并可以对早期版本（例如Bootstrap v3）使用“ img-sensitive”类。

用法：-

img标签：

class = “ img-fluid”

src = “ ...”

这是一种全JavaScript方法。它将图像逐渐缩小，直到正确适合为止。您可以选择在每次失败时缩小多少。此示例在每次失败时将其缩小10％：

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

随意直接复制和粘贴。

对我有用的是：

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

需要使用inline-flex来防止图像超出div范围。