如何避免固定高度容器内绝对定位图片在全设备下发生塌陷重叠

你不需要为每种屏幕宽度单独写媒体查询调整容器高度，存在更通用的适配方案。
问题根源在于你当前给容器设置的是固定的160vh高度，和容器宽度、内部图片的缩放逻辑没有绑定，屏幕尺寸变化时容器的高宽比和设计稿不一致，就会出现定位偏移、图片重叠的问题。

具体解决方案 #

核心逻辑是让容器的高度随宽度等比缩放，始终和设计稿的比例匹配，适配逻辑如下：

1. 用固定宽高比代替容器的固定高度：通过aspect-ratio属性把容器的宽高比设置成和设计稿中该区域的比例完全一致，容器高度会自动跟随宽度等比变化，和内部图片的缩放逻辑完全匹配。如果需要兼容老旧浏览器，可以用padding-top的兼容方案实现同等效果。
2. 给所有定位图片添加height: auto，保证图片始终等比缩放不会变形。
3. 原有基于百分比的定位规则不需要修改，容器比例固定后，百分比定位会自动等比适配所有屏幕尺寸。

修改后的代码示例 #

HTML结构不需要调整，CSS修改如下：

.img-container {
    /* 替换原有固定height，比例替换成你设计稿中容器的实际宽高比即可 */
    aspect-ratio: 100 / 160;
    position: relative;
    width: 100%;
    /* 兼容不支持aspect-ratio的老旧浏览器可以用下面两行代替aspect-ratio
    height: 0;
    padding-top: 160%;
    */
}

/* 统一给所有定位图片设置等比缩放 */
[class^="positioned-img-"] {
    height: auto;
}

.positioned-img-1 {
    position: absolute;
    top: 3%;
    left: 0;
    max-width: 46%;
}

.positioned-img-2 {
    position: absolute;
    top: 0;
    right: 6%;
    max-width: 40%;
}

.positioned-img-3 {
    position: absolute;
    top: 52%;
    left: 14%;
    max-width: 40%;
}

.positioned-img-4 {
    position: absolute;
    top: 48%;
    right: 15%;
    max-width: 25%;
}

如果小屏幕下等比缩放后的图片尺寸不符合设计需求，仅需要加1-2个断点调整容器的aspect-ratio和定位的百分比值即可，远比对每个屏幕单独设置容器高度高效。

内容的提问来源于stack exchange，提问作者Curious Programmer