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


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


当前回答

这是我的解决方案。您需要将图片插入两次。但它不使用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>

其他回答

我刚刚发布了一个jQuery插件,它可以满足您的需要,提供了很多选项:

https://github.com/GestiXi/image-scale

用法:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

将图像所需的高度和宽度提供给包含<img>标记的div。不要忘记在正确的样式标记中给出高度/宽度。

在<img>标记中,将最大高度和最大宽度设置为100%。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正确后,可以在适当的类中添加详细信息。

您可以将图像设置为div的背景,然后使用CSS background size属性:

background-size: cover;

它将“将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools

以下内容非常适合我:

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

如果您使用Bootstrap,只需将img响应类添加到img标记:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

引导映像