图片占位 css

手机端图片高度和宽度不能自动比例缩小的问题
<!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 {
         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 {
         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>