响应灵活的CSS背景图像

Question

我希望根据分辨率来适应我的图像，但是在样式代码上都有。

通常我们会在img标记上设置max-width。但这一次如何能够响应任何设备。

<ul class="ch-grid">
    <li>
        <div class="ch-item ch-img">
            <div class="ch-info"></div>
        </div>
    </li>
</ul>

下面的css代码

 .ch-grid {

     text-align: center;
     min-width: 100%;
 }

 .ch-grid li {
     width: 620px;
     height: 620px;
     display: inline-block;
     margin: 0px;
 }
 .ch-item {
     width: 100%;
     height: 100%;
     border-radius: 50%;
     position: relative;
     cursor:vertical-text;
     box-shadow: inset 0 0 0 13px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
 }
 .ch-img {
     background-image: url(http://s5.favim.com/orig/51/camera-dress-girl-hair-sky-Favim.com-469861.jpg);
     background-position:50% 50%;
     background-size: cover;
 }
 .ch-info {
     position:absolute;
     background: url(http://s5.favim.com/orig/51/camera-dress-girl-hair-sky-Favim.com-469861.jpg) D9E8FC;
     background-position:50% 50%;
     width: inherit;
     height: inherit;
     border-radius: 50%;
     opacity: 0;
     -webkit-transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
     transition: all 0.4s ease-in-out;
     -webkit-transform: scale(0);
     -moz-transform: scale(0);
     -o-transform: scale(0);
     -ms-transform: scale(0);
     transform: scale(0);
     -webkit-backface-visibility: hidden;
 }

检查 jsfiddle 以获取更多信息。