如何让我的标题图像填充宽度，同时保持相同的高度和宽高比？

我有一个1358×218的标题图片。在较大的屏幕上，它不适合屏幕的宽度。我希望它能够缩放图像，保持宽高比，因此宽度始终填充浏览器宽度的100％。这里是代码我目前有：如何让我的标题图像填充宽度，同时保持相同的高度和宽高比？

我怎样才能做到这一点？

2012-10-14 Andrew

几个可能的答案在这里给出：http://stackoverflow.com/questions/376253/stretch-and-scale-css-background – oal

-1

只是删除的高度，如果你设置的宽度和没有高度，broswer将保持纵横比

#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; 
    }

使用的实际<img>标签这些CSS设置，而不是浏览器的一个div适当调整

来源

2012-10-14 17:53:13

不，这是行不通的。你有没有尝试过一个非常宽阔的窗户？ – Jon

编辑，它将工作为img标记 –

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

来源

2012-10-14 17:53:46 Jon

您不能修改背景图像大小。你将不得不这样说：

<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-14 17:55:07 kumiau

这不会工作，它会切断部分图像 –

您可以删除溢出：隐藏，但在这种情况下，高度wouldnt总是相同的问题标题提示是必需的。 – kumiau

如何让我的标题图像填充宽度，同时保持相同的高度和宽高比？

回答

相关问题