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

【问题标题】：How do I fit an image (img) inside a div and keep the aspect ratio?如何在 div 中放置图像（img）并保持纵横比？
【发布时间】：2011-05-22 14:43:04
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

对 div 内的图片使用max-height:100%; max-width:100%;。

【讨论】：

@ZoveGames 未启用 JS 的浏览器？雅虎 2010 年的统计数据显示平均为 1.3%。我认为假设 a 是安全的。今天可能会更低，而且 b. programmers.stackexchange.com/questions/26179/…
它对我不起作用...它使图像 100% 成为它自己的大小（例如：300px 宽的图像实际上是 300px 宽）。
这会导致一些可怕的 Chrome-on-Windows 特定错误。可能与我拥有的某些平滑滚动插件有一些不好的交互。即使鼠标悬停在带有大图像的overflow:scroll div 上，它最终也会尝试滚动正文。好奇的。更奇怪的是：Max 的解决方案实际上修复了它。我真的受够了 CSS。曾经很强大很酷。现在实现只是在错误不一致之后产生错误不一致。
仅在缩小图像时有效。如果您想将小图像放入更大的容器中，这是行不通的
它不保留图像的原始纵横比。

【解决方案2】：

CSS 对象适配

不幸的是 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)

【讨论】：

这必须被标记为答案。“object-fit”工作得很好。
奇怪的是，iOS 8.1 中引入了对此的支持，而不是 8.0。
object-fit: cover; 为我工作。这里：*.com/questions/9071830/…
如果你想让图片在左上角而不是居中，你还需要使用object-position 0 0。
这是唯一对我有用的答案，它可以创建一个响应式图像背景，在保持图像纵横比的同时填充屏幕。

【解决方案3】：

如果您在编写 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 库，您可能想利用它。

【讨论】：

Michael 的回答要简单得多，而且它不使用 Javascript。不过我不知道浏览器的兼容性。
不，只要图像大于 div，迈克尔的答案就有效。如果您希望图像填充有关图像大小的 div（并且，如果您事先不知道图像大小，则可以这样做），这就是要走的路。
你不能使用 max-height:100%;最大宽度：100%；最小宽度：100%； min-height:100% 并得到相同的结果呢？诚实的问题。
不，这样做会强制宽度和高度为 100%，因此您可以更改图像纵横比。
图片在浏览器中缓存时不会调用onload，所以只在图片第一次加载时有效。

【解决方案4】：

仅使用 CSS：

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

【讨论】：

没有扩大规模
这太棒了！我网站中的所有图片现在都将保留它们的宽高比，这就是我想要的。

【解决方案5】：

HTML

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

CSS

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

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

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

【讨论】：

不要添加height: 100%，这会扭曲图像比例——OP希望保持比例。
我不确定 OP 是什么意思，但你不会保持比例正确吗？
我能做些什么来保持这个比例？如果我删除 height: 100% 图像将被裁剪。

【解决方案6】：

我在解决这个问题时遇到了很多问题，我发现的每一个解决方案似乎都不起作用。

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

div{
display: flex;
}

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

【讨论】：

我的图像在 Chrome 版本 61 中使用此解决方案失真
也许您的 div 设置了最大高度/高度或宽度，这会导致您的图像失真。
正是我的意思。图像失真是因为您在
上设置了宽度和高度
以你的例子..我相信你正在寻找你的图像 CSS: height: auto;宽度：100%；
任务是将图像放入 div 中，这意味着 div 具有尺寸，而图像只有纵横比。我需要将高度设置为某个值，否则问题条件和我的形象都会被扭曲。请查看JS fiddle 并更改您认为使其工作所需的内容。谢谢。

【解决方案7】：

试试 CSS：

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

将照片设置为背景图片可以让我们更好地控制大小和位置，让 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,..."/>

【讨论】：

【解决方案10】：

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

并且可以将类 "img-responsive" 用于旧版本，例如 Bootstrap v3。

用法：-

img 标记：-

类=“img-fluid”

src=“...”

【讨论】：

【解决方案11】：

对我有用的是：

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

需要 inline-flex 以防止图像超出 div。

【讨论】：

【解决方案12】：

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

随意直接复制粘贴。

【讨论】：

【解决方案13】：

太晚了，但是，试试这个解决方案：

.parent {
  display: flex;
  min-height: 400px; /* if you prefer */
}

.parent > img {
  display: block;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

【讨论】：