Question

大家好，我的网站上有一个全宽横幅。我在photoshop中制作了这个横幅（宽度：1350px，高度：375px）我使用下面的css和html来访问它。

#slider {
 margin-top:10px;
 height:375px;
 background:url(../Home/banner1.jpg) no-repeat center left;
}

我希望在更改浏览器尺寸时按比例调整此横幅的大小（例如网站http://www.endpolio.org/中的横幅）。如果我把另一个尺寸放在

@media handheld, only screen and (max-width: 767px) {
.....
}

它只会在特定宽度上调整大小。我想在每个像素（宽度和高度）中调整图像大小。这怎么可能？请帮帮我。

Answer 1

使用background-size:contain以保持比例。

以下是简写background:url('') 0px 0px / contain no-repeat;

更新了CSS：

#slider {
    width:100%;
    height:375px;
    background:url('http://placehold.it/1350x375') 0px 0px / contain no-repeat;
}

只需修改#slider的高度。

的信息，请参阅MDN

Answer 2

background-size:contain

IE9 +，Firefox 4 +，Opera，Chrome和Safari 5+支持background-size属性。 background-size