图像填充屏幕的宽度，但可视部分的高度保持固定

Question

我试图在我的网站上创建一个横幅区域，该区域横跨屏幕的宽度，无论屏幕大小如何，但始终保持相同的像素高度 (576 像素)。

在横幅中，我想放置一个图像，并且我希望图像放大，以便如果用户的屏幕比图像宽，它会拉伸以覆盖屏幕的宽度，但随后会切断顶部和底部图像，因此可视区域始终为 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