圖像填滿屏幕，但可視部分的高度，寬度保持不變

Question

我試圖建立其在屏幕上，無論屏幕尺寸的寬度延伸我的網站上的橫幅區域，但保持相同的像素高度（576px ） 每時每刻。

在橫幅中，我想放置圖像，並且希望圖像放大，以便在用戶屏幕比圖像更寬時覆蓋屏幕寬度，然後切斷頂部並圖像的底部，因此可視區域始終爲576px高度。

同樣，當在屏幕變得比所述圖像窄，它的可視區域總是一樣寬屏幕和高度總是576px居中的圖像和任何多餘的區域切斷。

完全一樣，他們在這裏：（我已經看了源，並試圖找出他們在做什麼，但無濟於事） http://www.royalflyingdoctor.org.uk/

我得到的最接近是這裏面的原因圖像變短，如果畫面變得過於狹窄：

<div class="bannerImg"> 
    <img src="/img/home_img_first.jpg" alt="" /> 
</div>  

.bannerImg {width: 100%; 
min-height: 576px; 
max-height: 576px; 
overflow: hidden; 
text-align: center;} 
.bannerImg img {width: 100%;} 

Answer 1

您應該使用背景圖片覆蓋的背景大小。例如：

.bannerImg { 
    background: url(/img/home_img_first.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

欲瞭解更多信息請參閱本enter link description here