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

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) {
.....
}

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

Answer 1

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

这里是简写，background:url('') 0px 0px/contain 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