css小技巧 移动端背景高宽等比例自适应

移动端背景等比例缩放，一般实现方法是，直接使用css3的background-size，但是有缺陷，高度不能固定缩放，

如果高度background-size： 100% 100%； 图片会变形，还有实现方法是用js来控制高度。

如果用css来实现，在网上找半天终于找到一种方法，宽度100%，图片都能等比例

小技巧,就是padding-bottom是按照父元素的宽度比计算的,而不是按高度算,所以可以用溢出的padding-bottom来做

 

 

例子

<div>

<p>内容</p>

</div>

.div {

overflow: hidden;

 position: relative;

background: url() 0 0 no-repeat;

height: 0;

width: 100%;

background-size: 100%

padding-bottom: 100%;//设定比例

}

p{

 

position: absolute;

}

实现圆等比例缩放实现

<div>

<img></img>

</div>

div{

width: 30%;

padding-top: 30%;

overflow: hidden;

position: relative;

border-radius: 100%;

}

div  img{

width: 100%;

position: absolute;

top: 0;

left: 0;

height: auto;

}