如何让CSS Grid尺寸自动增长以适配背景图片大小

你当前硬编码47vh高度的写法适配性很差：不同设备的视口宽高比差异极大，固定视口单位的高度会导致背景图要么被过度裁切丢失关键内容，要么出现多余留白，也没有利用Grid本身的自动尺寸计算特性。
另外你现有Grid代码存在冗余：单列场景下repeat(1, auto)没有实际意义，auto尺寸会跟随内容收缩，无法保证列宽占满容器，反而会干扰背景图的适配效果。

推荐方案：使用aspect-ratio属性（现代浏览器全支持） #

这是目前最简洁的标准实现，核心逻辑是给Grid子项设置和背景图完全一致的宽高比，Grid的auto行高会自动根据元素宽度、按比例计算出对应高度，完全不需要写死固定高度值。
操作步骤：

• 先查看所用背景图的原始宽高尺寸，计算出宽高比（宽度值/高度值）
• 将Grid容器的列宽改为1fr，保证单列占满容器可用宽度
• 给.egg元素设置对应aspect-ratio，移除硬编码的height: 47vh

参考代码：

.ads {
    display: grid;
    /* 单列布局直接用1fr，占满容器可用宽度 */
    grid-template-columns: 1fr;
    /* 6行自动高度，行高会自动适配子项的实际尺寸 */
    grid-template-rows: repeat(6, auto);
}
.ads .egg {
    /* 替换为你实际背景图的宽高比，比如图片原始尺寸为750px宽、900px高，比值就是750/900 = 5/6 */
    aspect-ratio: 5/6;
    background-image: url("/images/mobile/image-transform.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    /* 建议补充背景定位，保证图片裁切时始终显示核心区域 */
    background-position: center;
}

旧浏览器兼容方案（可选） #

如果需要兼容不支持aspect-ratio的老旧浏览器，可以用padding百分比撑高的经典方案：CSS中padding的百分比值始终参考元素的宽度计算，按图片比例算出对应的padding-top值即可撑开和图片比例一致的高度。
参考代码：

.ads .egg {
    position: relative;
    width: 100%;
    /* 按图片宽高比计算：高度/宽度*100%，比如5:6的比例就是6/5*100% = 120% */
    padding-top: 120%;
    background-image: url("/images/mobile/image-transform.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* 如果.egg内部需要放置其他内容，给子元素加绝对定位避免被padding挤出 */
.ads .egg > * {
    position: absolute;
    inset: 0;
}

方案优势 #

• 完全契合CSS Grid的自动尺寸计算逻辑，不需要硬编码和视口绑定的固定高度值
• 任意屏幕宽度下，元素都会严格按照背景图原始比例缩放，不会出现比例失调
• 适配逻辑稳定，不需要针对不同屏幕尺寸单独写媒体查询调整高度

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