css - 相对于视口宽度调整图像大小

Question

大家好，在我的网站上有一个全宽横幅。我在 photoshop 中制作了这个横幅（宽度：1350 像素和高度：375 像素）我使用以下 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) {
.....
}

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

score 2 · Accepted Answer

使用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.

score 2 · Accepted Answer

background-size:contain

IE9+、Firefox 4+、Opera、Chrome 和 Safari 5+ 支持 background-size 属性。背景尺寸

对于 ie - CSS3Pie ，更多在 IE 中拉伸背景图片

2 回答 2