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;
}

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

#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动态改变大小（至少就我能够想象的那样）。如果你想使用精灵，你应该使用JavaScript，但不能保证移动设备将支持Javascript，所以这是一个没有实际意义的点。

您无法严格使用CSS调整大小的原因是因为图像不能保持比例; HTML元素的宽度将改变，但高度不会改变。如果元素有任何方法可以使用严格的CSS来保持这些比例，我很乐意知道并会掀起一些示例代码，但是到目前为止我不相信它是可能的。

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

如何使这个精灵表现我想要的？

1 个答案: