页面布局 ——图片自动按比例显示&&图片随外部div的增大而按比例增大

图片按比例显示，分为两种情况。

1.空的div内加图片

<div class="emty"><img src="img/my.png"></div>   空的div内加图片：

.emty img{

　　width:100px;

}

只需设置图片的宽度（固定：px）。此时div不用设置宽和高，其宽度会自动和图片宽度保持一致，高度会按图片的比例自动生成。这样，无论页面如何缩放（或是不同宽高的手机），图片都会按比例显示（即不变形）。

2.有背景图片的div内加图片

<div class="backImg"><img src="img/my.png"></div>   有背景图片的div内加图片：

.backImg{

　　width:150px;

　　height:100px;

}

.backImg{

　　width:100%;

}

设置图片宽高为百分比，div为固定宽高（px），图片会自动按比例填满div。这样，无论页面如何缩放（或是不同宽高的手机），图片会按比例显示。这样的话，可以让背景图片和内加图片都按比例显示。

转载于:https://www.cnblogs.com/baby-zuji/p/8571307.html