Question

编辑：抱歉，我发现它不是那么清楚，我会尝试澄清。

我搜索的东西可以帮助我缩放＆＃34; /＆＃34;缩放＆＃34;在调整浏览器窗口的高度（而不是宽度）时，我在div中的背景图像。（见附图）

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

任何人都有解决方案吗？

我想要实现的目标的形象： http://imgur.com/a/zJgF4

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

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

1 个答案: