在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>