如果图像大于div，则强制占用div

Question

我有一个页脚菜单，背景是图像。

我想要显示所有图像（bacground图像比div大2000x168）。我设置宽度为100％，但似乎没有显示整个图像，它只显示我的屏幕大小

如何显示完整的图像，而不仅仅是我能在屏幕上看到的部分？

这是fiddle

#bottomnav{
    width:100%;
    height:50px;
   background: no-repeat url(http://eurekavi.com/barraroja.png) /*repeat 0 0*/;
    position:absolute;
    bottom:0px;

}

图片应该看起来像

Answer 1

在这里，试试这个：

    #bottomnav
    {
    width:100%;
    height:50px;
    background: no-repeat url(http://eurekavi.com/barraroja.png);
    background-size:100% 100%;
    }

希望它有所帮助！

Answer 2

您可以在CSS3中使用background-size属性。

#bottomnav{
    width:100%;
    height:50px;
    background:url(http://yoururl.com/image.png) no-repeat;
    background-size:100% auto;
}

这将有效，但仅适用于支持CSS3的浏览器。 在此示例中，根据分辨率自动调整图像的高度。如果你想保持预定的尺寸，你应该尝试这样的事情。

background-size:width height;

在此设置您的宽度为％或px，或者您可以使用100％，如上面的帖子中所述。 它会工作。 您也可以使用此参数     背景位置：中心; 这将使图像居中。

Answer 3

取决于您的需求：

#bottomnav{
    width:600px;
    height:50px;
    background:#F00;
    position:absolute;
    bottom:0px;
    background: no-repeat url(http://eurekavi.com/barraroja.png) top center;
    background-size: contain;
}

您可以将背景居中，以避免左右不平衡的黑色区域。

参考：http://www.css3.info/preview/background-size/