如何使用CSS Grid实现模态框内1:1等比无溢出正方形图片容器

问题根源 #

• 两列grid布局中，左侧auto列宽默认优先匹配图片原始尺寸，未和父容器.content的固定高度做绑定，导致图片撑开列宽超出容器范围
• 图片父容器.frame没有设置明确的宽高约束和1:1比例规则，图片宽高限制逻辑不生效

修复方案 #

调整对应CSS规则即可实现需求：

.modal {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(#000, 0.6);
    display: grid;
    place-items: center;
}

.content {
    background-color: #fff;
    width: 60%;
    height: 600px;
    border-radius: 5px;
    display: grid;
    /* 左侧列宽度自动匹配高度，限制最大占比为剩余可用空间，右侧固定300px */
    grid-template-columns: minmax(0, auto) 300px;
    /* 防止内容溢出容器 */
    overflow: hidden;
}

.frame {
    /* 高度继承父容器的600px固定值 */
    height: 100%;
    /* 强制1:1宽高比，宽度自动和高度对齐 */
    aspect-ratio: 1 / 1;
    /* 限制最大宽度为列的可用空间，避免小屏溢出 */
    max-width: 100%;
}

.frame > img {
    width: 100%;
    height: 100%;
    /* 填充满1:1容器且不变形，若需要图片完全不裁剪可替换为object-fit: contain */
    object-fit: cover;
}

.text {
    padding: 2rem 1rem;
    /* 后续添加滚动内容可启用该属性 */
    overflow-y: auto;
}

/* 响应式适配：屏幕宽度较小时改为上下布局 */
@media (max-width: 1000px) {
    .content {
        width: 90%;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        max-height: 90vh;
    }
    .frame {
        width: 100%;
        height: auto;
        max-height: 50vh;
    }
}

效果说明 #

• 桌面端图片始终保持1:1正方形，高度和模态框固定高度600px对齐，不会超出容器范围
• 右侧300px固定区域可正常添加滚动元素，不会出现撑大容器的问题
• 小屏幕自动切换为上下布局，图片宽度撑满模态框，维持1:1比例，适配不同尺寸设备

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