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

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/contains no-repeat;

jsFiddle demo

更新了 CSS:

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

只需修改#slider的高度即可。

有关 background-size 的信息，请参阅 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/background-size