将项目与背景对齐

Question

在下面的页面上，当我水平调整页面大小时，建筑物图像与背景图像完美对齐。但是，当我垂直调整页面大小时，建筑物并未以相同的方式对齐。我该怎么办？

https://www.ortakalan.org/code/bg4.htm

提前致谢。

当页面水平调整大小时，此 CSS 会将建筑物与背景对齐。当页面垂直调整大小时，我期望有相同的行为。

.building
{
width:max-content;
left:-100vh;
right:-100vh;
top:20vh;
position: absolute;
margin:auto;
box-sizing: border-box;
}


.background_container
{
position:absolute;
width:100vw;
height:100vh;
overflow:hidden;
background: url(Classroom1.png);
background-position: center;
}

Answer 1

似乎您只是缺少“建筑”元素的动态高度和底部位置。尝试设置

height: max-content

和

bottom: 20vh

，它应该可以工作。

.building {
  width: max-content;
  height: max-content;
  left: -100vh;
  right: -100vh;
  top: 20vh;
  bottom: 20vh;
  position: absolute;
  margin: auto;
  box-sizing: border-box;
}