CSS固定页脚宽度调整图像中心大小

Question

我有一个广泛的图像我想用作一个固定页脚。主页面是960px并居中，页脚是1620px。如果浏览器窗口宽度大于960像素，则会显示越来越多的页脚图像而不显示滚动条。

我该如何做到这一点？到目前为止，我有这一点，但它是错误的：

CSS

* { 
    margin: 0; 
} 

html, body { 
    height: 100%; 
} 

div#wrapper { 
    position: relative; 
    width: 100%; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -340px; 
    text-align: center; 
} 

div#body-container { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

.footer, .push { 
    width: 1620px; 
    height: 340px; 
} 

HTML

<div id="wrapper"> 
    <div id="body-container"> <!-- width: 960px --> 
    <!-- content --> 
    </div> 

    <!-- fixed footer --> 
    <div class="push"></div> 
    <div class="footer"><img src="img/footer.png"></div> <!-- width: 1620px --> 
</div> 

Answer 1

您可以通过更新footer的宽度100%并添加属性overflow: hidden解决这个问题它会如果内部（图像）内容大于页脚宽度，请移除滚动条。

它会变得更复杂一点，但是如果你想要做的事情也是图像的中心。为此，您需要添加relative定位到.footer和absolute定位到img。您还需要将left: 50%和margin-left: -810px（图像宽度的一半）添加到img。

这里是代码的最后更新的部分：

.footer, .push { 
    width: 100%; /* changed from 1620px;*/ 
    height: 340px; 
    overflow: hidden; 
    position: relative; 
} 

.footer img { 
    width: 1620px; 
    height: 340px; 
    left: 50%; 
    margin-left: -810px; 
    position: absolute; 
} 

，这里是一个的jsfiddle证明：http://jsfiddle.net/uf8Lh/

Answer 2

.footer { 
width:100%; 
height:345px; 
display: block; 
background:url(/img/footer.png) no-repeat center top; 
}