響應寬度Div與圖像背景作爲全寬頁眉圖像（固定高度）

Question

我一直在尋找靈感，我已經離開HTML遊戲很多年了。我決定在一個項目上工作，以重新回到事物的擺動中。現在我看到很多網站都使用全寬頁眉圖片，這些圖片看起來非常漂亮。我看到的主要內容是它們對視口的寬度做出反應。

我有一個圖像（大約5000x1300px）。我知道可能會對我所用的東西有點極端，但那是我得到的圖像。我需要的是一個全寬頭，它專注於該圖像的一個特定部分，並且隱藏了溢出，但是如果視口變得更大，將會顯示更多的圖像。

到目前爲止，我嘗試過的方式是，瀏覽器試圖將5000像素寬度的100％壓扁到視口中，這會使圖像看起來扭曲和擠壓。

有沒有簡單的方法呢？

Answer 1

可能瞄準你想要關注百分比的位。

HTML：

<header></header> 

CSS：

header { 
    background: url('your image') 20% 20% no-repeat; 
    height: 100px; /* ? */ 
} 

實施例：http://jsfiddle.net/Q6kHZ/

background-size使用縮放圖像;恩。 background-size: 960px 600px;

http://jsfiddle.net/Q6kHZ/2/