0

我有一个 1358 × 218 的标题图像。在较大的屏幕上，它不适合屏幕的宽度。我希望它缩放图像，保持纵横比，所以宽度总是填充浏览器宽度的 100%。这是我目前拥有的代码：

http://jsfiddle.net/qD5n5/

我怎样才能做到这一点？

4

3 回答 3

1

您不能修改背景图像大小。你必须这样：

<div id="header" style="oveflow: hidden; height: 50px /*your fixed height*/">
  <img src="background.jpg" style="max-width: 100%" />
</div>

这会将图像拉伸到 100%，保持纵横比和溢出：隐藏会让你保持固定的高度。

这是小提琴：http: //jsfiddle.net/kumiau/qD5n5/1/

于 2012-10-14T17:55:07.293 回答
1

在现代浏览器（IE >= 9 和其他浏览器）上，您可以使用background-size: cover. 否则，您将需要更改标记，可能通过使用<img>标签而不是 CSS 背景来显示图像。

于 2012-10-14T17:53:46.457 回答
-1

只要去掉高度，如果你设置了宽度而不设置高度，浏览器将保持纵横比

  #header {
    background-image:url('http://i.imgur.com/RvQdH.jpg');
    width:100%;        
    margin-left:auto;
    margin-right:auto;
    background-position:center;
    background-repeat:no-repeat;
   }​

将这些 css 设置用于实际<img>标签，而不是用于浏览器正确调整大小的 div

于 2012-10-14T17:53:13.423 回答