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

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

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。这样,无论页面如何缩放(或是不同宽高的手机),图片会按比例显示。这样的话,可以让背景图片和内加图片都按比例显示。

原文地址:https://www.cnblogs.com/baby-zuji/p/8571307.html