如何使图片背景橙色方块在响应式布局中保持形状不变？

你的问题出在.img容器没有固定宽高比，加上伪元素使用百分比宽高，当屏幕尺寸变化时，flex布局重新分配空间导致容器宽高比例改变，伪元素的形态和相对位置随之变形。以下是两种可行解决方案：

方法1：使用aspect-ratio固定容器比例（现代浏览器推荐） #

给.img容器设置与图片匹配的固定宽高比，让伪元素的百分比宽高始终跟随容器比例，避免变形。

修改后的CSS代码：

.home .post .img{
    flex:1;
    position: relative;
    aspect-ratio: 1 / 1; /* 根据你的图片比例调整，比如正方形用1/1，4:3用4/3 */
    overflow: hidden;
}

.home .post .img img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例，填充容器 */
}

.home .posts :nth-child(2n-1) .img::after{
    content:"";
    width:100%;
    height: 100%;
    background-color: rgba(255,145,77,255);
    position: absolute;
    top: 20px; /* 若要完全响应式缩放，可改为百分比，比如5% */
    left: -20px;
    z-index: -1;
}

方法2：兼容旧浏览器的宽高比实现 #

如果需要兼容不支持aspect-ratio的浏览器，用padding-top模拟固定比例：

.home .post .img{
    flex:1;
    position: relative;
    width: 100%;
    padding-top: 100%; /* 对应1:1的正方形比例，4:3则设为75% */
    overflow: hidden;
}

.home .post .img img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .posts :nth-child(2n-1) .img::after{
    content:"";
    width:100%;
    height: 100%;
    background-color: rgba(255,145,77,255);
    position: absolute;
    top:20px;
    left: -20px;
    z-index: -1;
}

额外适配：移动端flex布局调整 #

如果移动端.post会切换为纵向布局，添加媒体查询确保容器比例不变：

@media (max-width: 768px) {
    .home .post{
        flex-direction: column;
    }
    .home .post .img{
        width: 100%;
        aspect-ratio: 1/1; /* 保持比例 */
    }
}

核心逻辑是让.img容器的宽高比固定，这样伪元素的尺寸和偏移相对位置会在任何屏幕尺寸下保持一致，不会变形。

内容的提问来源于stack exchange，提问作者Praise A.