图片按比例显示,分为两种情况。
1.空的div内加图片
<div class="emty"><img src="img/my.png"></div> 空的div内加图片:
.emty img{
100px;
}
只需设置图片的宽度(固定:px)。此时div不用设置宽和高,其宽度会自动和图片宽度保持一致,高度会按图片的比例自动生成。这样,无论页面如何缩放(或是不同宽高的手机),图片都会按比例显示(即不变形)。
2.有背景图片的div内加图片
<div class="backImg"><img src="img/my.png"></div> 有背景图片的div内加图片:
.backImg{
150px;
height:100px;
}
.backImg{
100%;
}
设置图片宽高为百分比,div为固定宽高(px),图片会自动按比例填满div。这样,无论页面如何缩放(或是不同宽高的手机),图片会按比例显示。这样的话,可以让背景图片和内加图片都按比例显示。