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

Question

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

在横幅中，我想放一张图片，我希望图片放大，这样如果用户屏幕比图片宽，它会拉伸(stretch)以覆盖屏幕宽度，但随后会切断顶部和底部图像的高度，因此可视区域始终为 576 像素高度。

同样，当屏幕变得比图像窄时，可视区域始终与屏幕一样宽，高度始终为 576 像素，图像居中，多余区域被切掉。

就像他们在这里一样:(我查看了源代码并试图弄清楚他们在做什么但无济于事) 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