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


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


当前回答

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

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

其他回答

正如我在2014年Codepen示例中所看到的,我已经制定了一个解决方案,可以在尽可能少的javascript的帮助下处理任何未知的宽度/高度(纵横比)组合,以在容器的纵横比高于/低于图像的纵横比时更改图像居中的CSS:

尝试通过拖动右下角来调整容器大小:

//检测当前图像的窗口宽度是否过窄//并且适合于100%的高度而不是100%的宽度。const photo=文档.images[0]const onPhotoResize=新建ResizeObserver(条目=>window.requestAnimationFrame(checkRatio))onPhotoResize观察(photo.parentNode)函数checkRatio(){const photoParent=photo.parentNode,imageAspectRatio=照片客户端宽度/照片客户端高度,parentAspectRatio=photoParent.clientWidth/photoPrent.clientHeightphoto.classList[imageAspectRatio>parentAspectRatio?'add':'remove']('max')}.box格式{宽度:20%;高度:60%;边距:自动;位置:绝对;顶部:0;左:0;右:0;底部:0;调整大小:两者;溢出:隐藏;边框:5px纯红色;} .box>img{位置:绝对;顶部:50%;左:50%;宽度:100%;转换:转换(-50%,-50%);}.box>img.max{width:auto;height:100%;}<div class='box'><img src=“https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg"></div>

最简单的方法是使用对象拟合:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

如果您使用Bootstrap,只需添加img响应类并更改为

.container img{
    object-fit: cover;
}

此解决方案不会拉伸图像并填充整个容器,但会剪切部分图像。

HTML格式:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

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

这里有一个解决方案,即使提供的图像太小或太大,无法容纳div,它也可以在div中垂直和水平对齐img,而不进行任何拉伸。

HTML内容:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS内容:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQuery部分:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }