html - 在 div 中居中背景图像并在缩放时保持比例

Question

编辑:抱歉，我意识到它不是很清楚，我会尽力澄清。

我搜索的是在调整浏览器窗口的高度(而不是宽度)时帮助我在 div 中“缩放”/“缩放”我的背景图像的东西。 (见附图)

到目前为止，我只设法让图像裁剪，但仍然使用下面的代码居中。

有人对此有解决方案吗？

我想要实现的目标的图片: http://imgur.com/a/zJgF4

.wrap {
  height: 50%
  background-color: red;
  overflow: hidden;
  position: relative;
  background-size: cover;
}

.image {
  position: absolute;
  left: 50%;
  margin-left: -1020px;
  background:url('https://placebear.com/2040/866') no-repeat;
  width:2040px;
  height:866px;
}

  <div class="wrap">
      <div class="image"></div>
  </div>

Answer 1

我认为这就是您所描述的。

您可以使用 background-size: cover; 让图像始终填满容器。

https://developer.mozilla.org/en/docs/Web/CSS/background-size

这至少会将图像缩放到正确的比例。然后您可以根据需要缩放容器。

您可以使用vh 测量单位根据浏览器窗口的高度来控制图像容器的高度。

https://snook.ca/archives/html_and_css/vm-vh-units

.wrap {
  height: 70vh;
  background-color: red;
  overflow: hidden;
  position: relative;
  background: url('https://placebear.com/2040/866') no-repeat;
  background-size: cover;
}

<div class="wrap">
</div>