如何在 div 中放入图像(img)并保持长宽比？

我有一个48x48的 div，里面有一个 img 元素，我想把它放到 div 中，不丢失任何部分，同时保持这个比率，使用 html 和 css 可以实现吗？

653048 次浏览
小开

超文本标示语言

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

CSS

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


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

这将使图像展开以填充其父级，其大小在 div 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 库，您可能希望利用它。

小开

对 div 中的图像使用 max-height:100%; max-width:100%;。

小开

仅使用 CSS:

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

CSS 对象匹配

不幸的是，最大宽度 + 最大高度不能完全覆盖我的任务..。 因此，我找到了另一种解决办法:

要在缩放时保存 Image ratio ，还可以使用 object-fit CSS3属性。

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

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

坏消息: IE 不支持(我能用吗)

小开

将照片设置为背景图像将使我们能够更好地控制大小和位置，使 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 请求，将占位符图像转换为数据: URL。

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

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

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

div{
display: flex;
}


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

你可以使用类 “ IMG 液体”的新版本，即 引导器 V4。

可以使用类 “图像响应”的旧版本，如 引导 V3。

用法 :-

带有:-的 img 标记

类别 = < strong > “ img- 流体”

Src = "..."

小开

对我来说，下面的 CSS 可以工作(在 Chrome，Firefox 和 Safari 中测试过)。

有多种因素共同作用:

  • max-height: 100%;、 max-width: 100%;和 height: auto;、 width: auto;在保持高宽比的前提下，使图像尺寸达到最初的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%);
}
小开

试试 CSS:

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

下面是一个全 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。

小开

很晚了，但是，试试这个办法:

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


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

提交答案