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


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


当前回答

本文可能会帮助您:

.方形{位置:相对;宽度:300px;高度:300px;溢出:隐藏;}国际货币基金组织{位置:绝对;最大宽度:100%;宽度:100%;高度:自动;顶部:50%;左:50%;转换:转换(-50%,-50%);}img.景观{高度:100%;宽度:自动;}<div class=“square”><img src=“https://unsplash.it/400/500“alt=”图像“/></div><div class=“square”><img src=“https://unsplash.it/500/400“class=”landscape“alt=”图像“/></div>

简单的CSS解决方案:如何将不同尺寸的图像放在集合容器中(2017-05-01)

.方形{位置:相对;宽度:441px;高度:200px;溢出:隐藏;边框:1px实心黑色;}国际货币基金组织{最大宽度:100%;/*宽度:100%*/<----它拉伸图像并适合父对象高度:自动;/*转换:转换(-50%,-50%)*/<-----设置垂直和水平中心}img.景观{高度:100%;宽度:自动;}<div class=“square”><img src=“https://cdn.pixabay.com/photo/2020/08/28/12/32/man-5524488__340.jpg“alt=”图像“/></div>

其他回答

这是我的解决方案。您需要将图片插入两次。但它不使用js,img将调整为宽度和高度。您可以单击“运行代码片段-完整页面”,打开开发控制台并调整窗口宽度以查看响应效果。/*响应宽度*/.响应宽度{背景:lightsalmon;高度:100px;宽度:50%;}/*Widthlimit公司*/.最大宽度{背景:海军;高度:200px;宽度:100px;}.div1{最大高度:100%;位置:相对;框大小:内容框;/*中心:*/顶部:50%;变换:translateY(-50%);}.边缘{高度:自动;最大宽度:100%;不透明度:0;}.div2{高度:100%;宽度:配合内容;位置:绝对;顶部:0;/*中心:*/左:50%;变换:translateX(-50%);}.mainimg{最大高度:100%;最大宽度:100%;}<div class=“responsivewidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div><div class=“maxedbywidth”><div class=“div1”><img class=“margerimag”src=“https://via.placeholder.com/2000x1500" /><div class=“div2”><img class=“mainimg”src=“https://via.placeholder.com/2000x1500" /></div></div></div>

以下内容非常适合我:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

我看到很多人都建议对象匹配,这是一个不错的选择。但是,如果您希望它也能在较旧的浏览器中工作,还有另一种方法可以轻松实现。

这很简单。我采用的方法是将图像放置在容器内,然后使用组合将其放置在中心:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心,我给图像,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使图像获得对象拟合的效果:覆盖。


以下是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。

让它变得简单!

给容器一个固定的高度,然后为容器内的img标记设置宽度和最大高度。

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

不同的是,您将宽度设置为100%,而不是最大宽度。

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

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