如何自动调整大图像的大小,使其适合较小的宽度div容器,同时保持其宽高比
示例:stackoverflow.com-当图像插入到编辑器面板,且图像太大而无法放入页面时,图像会自动调整大小
不要对图像标记应用明确的宽度或高度。相反,给它:
最大宽度:100%;
最大高度:100%;
另外,高度:自动如果只想指定宽度
例如:http://jsfiddle.net/xwrvxser/1/
img{
最大宽度:100%;
最大高度:100%;
}
.肖像{
高度:80px;
宽度:30px;
}
.景观{
高度:30px;
宽度:80px;
}
.广场{
高度:75px;
宽度:75px;
}
纵向Div
<;div class=“纵向”>;
<;img src=”http://i.stack.imgur.com/xkF9Q.jpg“>;
</部门>;
景观组
<;div class=“景观”>;
<;img src=”http://i.stack.imgur.com/xkF9Q.jpg“>;
</部门>;
方形分区
<;div class=“square”>;
<;img src=”http://i.stack.imgur.com/xkF9Q.jpg“>;
</部门>