Question

我正在帮助一个朋友为他的公司建立一个网站。在页面顶部，导航栏下方，我有一个房屋的背景图像，该背景图像设置为100％宽度，图像大小为2400px x 1602px。我的问题是如何控制图像，以使房屋始终位于正面和中央。我还需要将高度保持在75vh左右。

我尝试使用background-size：Cover和Contain，以及设置背景位置。但是，通过遮盖的方式，房子并不总是居中。尤其是在浏览器宽度更大的情况下-只有房子的屋顶可见。接下来，我尝试使用图像的宽高比进行填充。这样效果很好，但不允许我设置高度（据我所知），因此在较大的屏幕上，最终导致高度变大。

希望有人可以提出建议，这可以帮助我并为我指明正确的方向。最后，我想得到一幅房屋的图像，该房屋始终可见，并且能够保持高度为75vh。我觉得媒体查询可能是我的答案，但是在继续之前，我需要一些建议。还不确定是否需要裁剪图像以限制高度？我尝试了很多不同的事情，因此不确定如何进行。谢谢您的任何建议，我非常感谢。

Answer 1

我认为背景封面图像是正确的方法，您可能只是在代码中添加了一些不使图像居中的内容，这就是为什么您只看到屋顶（我认为是图像的顶部）而不是顶部的原因。全景屏幕的中间部分。

这是我要使用的代码：

这是HTML

<div class="header">Your menu and other header stuff goes here</div>
<div class="bg_image" style="background: url('https://www.marriedwithmoney.com/wp-content/uploads/2017/06/house-1024x698.jpeg') center center / cover no-repeat;"></div>

这是CSS

.header {
  width: 100%;
  height: 200px;
  background-color: #ccc;
}
.bg_image {
  width: 100%; 
  height: 75vh;
}

这是一个有效的示例，如果我正确理解了您的情况，https://codepen.io/anon/pen/REerRR

需要设置一个具有高度的响应式（流体）背景图像

1 个答案: