如何自动调整大图像的大小,使其适合较小宽度的 div 容器,同时保持其宽高比?
示例:stackoverflow.com - 当图像插入到编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小。
不要对图像标签应用明确的宽度或高度。相反,给它:
max-width:100%;
max-height:100%;
此外,height: auto;
如果你只想指定宽度。
示例:http : //jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
这不会同时缩放高度和宽度。
高度:自动;如果您只想指定宽度
这三个对我来说很好用: img { max-width: 100%; 高度:100%;适合对象:覆盖;}
不对图像应用明确的宽度和高度会产生副作用,即页面不会为图像保留空间,并且页面会在图像加载时闪烁或内容可能会跳动。