如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?


示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。


当前回答

解决方法很简单,只需要一点数学。。。

只需将图像放在div中,然后放在指定图像的HTML文件中。使用图像的像素值以百分比形式设置宽度和高度值,以计算宽度与高度的精确比率。

例如,假设您的图像宽度为200像素,高度为160像素。您可以放心地说,宽度值将为100%,因为它是较大的值。要计算高度值,只需将高度除以宽度即可得到80%的百分比值。在代码中,它看起来像这样。。。

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

其他回答

目前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。

要按比例调整图像大小,必须将高度或宽度设置为“100%”,但不能同时设置两者。如果将两者都设置为“100%”,则图像将被拉伸。

选择高度还是宽度取决于图像和容器尺寸:

如果您的图像和容器都是“肖像形状”或“风景形状”(分别比它们宽或宽),那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的,而容器是横向的,则必须在图像上设置height=“100%”。如果图像是横向的,而容器是纵向的,则必须在图像上设置width=“100%”。

如果您的图像是SVG,这是一种可变大小的矢量图像格式,则可以自动展开以适应容器。

您只需确保SVG文件中没有在<SVG>标记中设置这些财产:

height
width
viewbox

大多数矢量绘图程序在导出SVG文件时都会设置这些财产,因此每次导出时都必须手动编辑文件,或者编写脚本来进行编辑。

事实证明,还有另一种方法可以做到这一点:对象拟合。

<img style='height: 100%; width: 100%; object-fit: contain'/>

将完成工作。当然,不要忘记包含其他必要的属性,如src和alt。

小提琴:http://jsfiddle.net/mbHB4/7364/

正如这里所回答的,你也可以使用vh单位而不是最大高度:如果它在你的浏览器(如Chrome)上不起作用,100%:

img {
    max-height: 75vh;
}

您必须告诉浏览器您放置它的高度:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

我有更好的解决方案,不需要任何JavaScript。它反应灵敏,我经常使用它。通常需要将任何纵横比的图像与具有指定纵横比的容器元素相匹配。必须让这一切都能完全响应。

/*仅用于此演示*/.容器{最大宽度:300px;边距:0自动;}.img框架{方框阴影:3px 3px 6px rgba(0,0,0、.15);背景:#ee0;边距:20px自动;}/*这适用于具有指定纵横比的响应容器*/.纵横比{位置:相对;}.方面-1-1{填充底部:100%;}.方面-4-3{填料底部:75%;}方面-16-9{垫底:56.25%;}/*这是关键部分-定位并将图像适配到容器*/.fit img{位置:绝对;顶部:0;右:0;底部:0;左:0;边距:自动;最大宽度:80%;最大高度:90%}.fit img底部{顶部:自动;}.紧密贴合{最大宽度:100%;最大高度:100%}<div class=“container”><div class=“纵横比aspect-ratio-1-1 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-4-3 img帧”><img src=“https://via.placeholder.com/400x300“class=”fit img fit img tight“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/400x400“class=”fit img“alt=”sample“></div><div class=“纵横比aspect-ratio-16-9 img帧”><img src=“https://via.placeholder.com/300x400“class=”fit img fit img bottom“alt=”sample“></div></div>

您可以独立设置最大宽度和最大高度;图像将遵循最小的图像(取决于图像的值和纵横比)。您还可以将图像设置为按需对齐(例如,对于无限白色背景上的产品图片,您可以轻松地将其定位到中心底部)。