移动端背景等比例缩放,一般实现方法是,直接使用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;
}