如何讓我的標題圖像填充寬度，同時保持相同的高度和寬高比？

我有一個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

如何讓我的標題圖像填充寬度，同時保持相同的高度和寬高比？

回答

相關問題