图像填满屏幕，但可视部分的高度，宽度保持不变

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