页面水平缩放时建筑图与背景对齐，垂直缩放失效，求解决方案

问题现状 #

页面水平缩放时，建筑图片与背景图能完美对齐，但垂直缩放时无法保持对齐效果。现有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;
}

修改方案 #

核心思路是让建筑图片的定位、缩放逻辑与背景图完全同步，避免固定值导致的错位：

修改后的完整CSS代码 #

.background_container
{
    position:absolute;
    width:100vw;
    height:100vh;
    overflow:hidden;
    background: url(Classroom1.png);
    background-position: center;
    background-size: cover; /* 保证背景图按比例覆盖容器，不拉伸 */
    background-repeat: no-repeat;
}

.building
{
    position: absolute;
    left: 50%;
    top: 50%;
    /* 根据背景图中建筑的实际垂直位置调整translateY值，示例为-40%，需实际调试 */
    transform: translate(-50%, -40%);
    /* 按背景图中建筑的宽度比例设置，示例为70vw，需根据实际调整 */
    width: 70vw;
    aspect-ratio: 16/9; /* 替换为建筑图片的实际宽高比，保证比例不变 */
    object-fit: contain;
    box-sizing: border-box;
}

关键修改说明 #

1. 背景图优化：添加background-size: cover，确保背景图在任何缩放场景下都按自身比例覆盖容器，避免变形或错位。
2. 建筑定位逻辑：用left:50% + top:50% + transform: translate()实现基于容器的相对居中，替代原固定vh值的定位，保证垂直缩放时位置同步。
3. 比例锁死：通过aspect-ratio固定建筑图片的宽高比，配合vw单位的宽度，让建筑缩放比例与背景图完全匹配。
4. 微调垂直位置：调整transform: translate()中的Y轴偏移量，让建筑图片与背景图中的建筑位置精准对齐（需根据实际背景图调试数值）。

内容的提问来源于stack exchange，提问作者Alp Durmaz