Question

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

在横幅中，我想要放置一个图像，我希望图像放大，这样如果用户屏幕比它伸展的图像宽，以覆盖屏幕的宽度，但是然后切断顶部和底部图像的可见区域总是高576像素。

同样，当屏幕比图像窄时，可视区域总是与屏幕一样宽，高度始终为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

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

1 个答案: