html - 如何让这个 Sprite 按照我想要的方式运行？

Question

我有以下 html，其中我的 div 中间包含一个背景图像。这是一张全宽图​​像，我想占据整个屏幕并以宽度折叠为中心以进行响应式设计。我也有一个页眉和一个页脚，它们具有类似的全长图像，它们的行为相同，但不是我在这里只显示中间图像的代码:

   <div id="contain">
     <div id="middle_contain">
       <div class="lawyer_select">
            <div class="lawyer_hold">
                <img src="images/example.jpg" width="252" height="286" alt="stuff" /></div>
            <div class="lawyer_hold">
                <img src="images/example.jpg" width="252" height="286" alt="things" />
               </div>
            </div>
         </div>
     </div>

它具有以下 CSS:

#middle_contain{
      background-image:url(../images/layout/main-example.jpg);
      background-position:center;
      background-size:cover;
     -moz-background-size: cover;
     -webkit-background-size: cover;
     -o-background-size: cover;
      background-size: cover;
}
.lawyer_hold{
    height:312px;
    width:480px;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    float:left;
    margin-top:30px;
}
.lawyer_hold:nth-child(2){
    float:right;
    margin-top:30px;
}

现在，我遇到的情况不是加载中间包含图像加上页眉和页脚图像，我想将它们组合成一个 sprite。我无法获得正确的代码，所以我的图像在崩溃时保持居中等。我尝试了以下 css，它将图像正确定位在我最大的屏幕分辨率上，但现在当我折叠时，其他一切都崩溃了。在使用 sprite 时如何正确地保持覆盖背景并使其居中？这是可能的还是我应该坚持使用三个单独的图像？

#middle_contain{
    background-image:url(../images/layout/main-example.jpg);
    background-position:center;
    background-position:0px -167px;
    background-size:cover;
       -moz-background-size: cover;
       -webkit-background-size: cover;
       -o-background-size: cover;
    background-size: cover;
}

Answer 1

仅用 CSS 不可能让背景图像 Sprite 动态改变大小(至少据我所知)。如果你想使用 Sprite ，你应该使用 JavaScript，但不能保证移动设备会支持 Javascript，所以这是一个有争议的问题。

不能严格使用 CSS 调整大小的原因是图像无法保持比例； HTML 元素的宽度会改变，但高度不会。如果元素有任何方法可以严格使用 CSS 来保持这些比例，我很想知道并会编写一些示例代码，但目前我认为这是不可能的。

在这种情况下，最好坚持使用 3 张单独的图片。但是，您可以创建不会调整大小的 Sprite 图像。