手机端图片高度和宽度不能自动比例缩小的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.ui-placehold-img {
background-color: red;
padding-top: 31.25%;
position: relative;
}
.ui-placehold-img>span {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-repeat: no-repeat;
-webkit-background-size: cover;
}
.ui-placehold-img>span.jd {
width: 50%;
height: 50%;
position: absolute;
top: 25%;
left: 25%;
z-index: 1;
background-repeat: no-repeat;
-webkit-background-size: cover;
}
</style>
</head>
<body>
<div class="demo-block">
<div class="ui-placehold-img">
<span style="background-image:url(http://img0.bdstatic.com/img/image/shouye/PC%E9%A6%96%E9%A1%B5%E8%83%8C%E6%99%AF%EF%BC%8D%E5%88%98%E6%80%9D%E5%BD%A4.jpg)">
</span>
<span class="jd" style="background-image:url(http://img.blog.163.com/photo/MOoHtw9mTxHf8dI57QL4yw==/5663276531418682069.jpg)">
</span>
</div>
</div>
</body>
</html>