如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
我有更好的解决方案,不需要任何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>
您可以独立设置最大宽度和最大高度;图像将遵循最小的图像(取决于图像的值和纵横比)。您还可以将图像设置为按需对齐(例如,对于无限白色背景上的产品图片,您可以轻松地将其定位到中心底部)。
其他回答
我以这种方式在超链接内水平和垂直居中并按比例缩放图像:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
它在Internet Explorer、Firefox和Safari中进行了测试。
有关居中的更多信息,请参阅此处。
这里有一个解决方案,即使提供的图像太小或太大,无法容纳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);
}
查看我的解决方案:http://codepen.io/petethepig/pen/dvFsA
它是用纯CSS编写的,没有任何JavaScript代码。它可以处理任何大小和方向的图像。
给定这样的HTML:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
CSS代码将是:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
目前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。
要按比例调整图像大小,必须将高度或宽度设置为“100%”,但不能同时设置两者。如果将两者都设置为“100%”,则图像将被拉伸。
选择高度还是宽度取决于图像和容器尺寸:
如果您的图像和容器都是“肖像形状”或“风景形状”(分别比它们宽或宽),那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的,而容器是横向的,则必须在图像上设置height=“100%”。如果图像是横向的,而容器是纵向的,则必须在图像上设置width=“100%”。
如果您的图像是SVG,这是一种可变大小的矢量图像格式,则可以自动展开以适应容器。
您只需确保SVG文件中没有在<SVG>标记中设置这些财产:
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时都会设置这些财产,因此每次导出时都必须手动编辑文件,或者编写脚本来进行编辑。
这是我的解决方案。您需要将图片插入两次。但它不使用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>