Question

我有一个48x48 div，里面有一个img元素，我想把它装进div而不会丢失任何部分，同时保持比例，是否可以使用html和css实现？

Answer 1

使用max-height:100%; max-width:100%;作为div内的图像。

Answer 2

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

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

有用的文章：Control image aspect ratios with CSS3

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

坏消息：IE不受支持（Can I Use）

Answer 3

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

HTML＆amp;的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库，则可能希望利用它。

Answer 4

仅使用CSS：

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

Answer 5

HTML

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

CSS

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

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

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

Answer 6

我遇到很多问题要解决这个问题，我找到的每一个解决方案似乎都没有用。

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

div{
display: flex;
}

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

Answer 7

尝试CSS：

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

Answer 8

将照片设置为背景图片，可以让我们更好地控制尺寸和位置，让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请求，convert the placeholder image to a data: URL。

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

Answer 9

对我来说，以下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%);
}

Answer 10

您可以使用＆＃34; img-fluid＆＃34; 类用于较新版本，即 Bootstrap v4 。

可以使用类＆＃34; img-responsive＆＃34; 等旧版本，例如 Bootstrap v3 。

用法的： -

img 标记： -

<强>类 = <强>＆＃34; IMG-流体＆＃34;

src = ＆＃34; ...＆＃34;

Answer 11

这是一种全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);
});

随时可以直接复制和粘贴。

Answer 12

对我有用的是：

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

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

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

12 个答案:

HTML＆amp;的JavaScript

CSS

HTML

CSS