点击figure标签内图片实现居中溢出放大的问题排查

你的问题核心是：当前代码只调整了figure的max-width和margin，但没有让figure的实际宽度主动扩展到新的上限，同时内部图片也未绑定figure的宽度，导致放大效果不生效。

问题分析 #

• 默认状态下，figure的宽度由内部图片的原始尺寸或父容器宽度决定，当你在:active中增大max-width时，只要当前figure的实际宽度小于这个新上限，max-width就不会触发宽度变化。
• 缩小max-width时生效，是因为新上限比当前figure宽度小，会强制压缩它的尺寸。
• 另外你设置的margin-left: -5rem只会让图片左移，无法实现两侧均等溢出的需求。

修复方案 #

方案1：调整width与margin实现均等溢出

先让内部图片自适应figure宽度，再主动让figure扩展到新的max-width上限，同时修正margin实现两侧对称溢出：

figure {
    display: block;
    height: auto;
    max-width: 90%;
    margin: 1rem auto;
    /* 让图片撑满figure宽度 */
    img {
        width: 100%;
        height: auto;
        object-fit: contain; /* 可选，确保图片比例不变 */
    }
    &:active {
        max-width: calc(100% + 5rem);
        width: 100%; /* 强制figure扩展到max-width的大小 */
        margin-left: -2.5rem; /* 左右各溢出2.5rem，实现对称 */
    }
}

方案2：用transform: scale()更简洁

这种方式不需要调整margin和width，直接通过缩放实现放大，自动保持中心对称：

figure {
    display: block;
    height: auto;
    max-width: 90%;
    margin: 1rem auto;
    img {
        width: 100%;
        height: auto;
        transition: transform 0.2s; /* 可选，添加平滑过渡动画 */
    }
    &:active img {
        /* 计算放大比例：目标宽度/原宽度，确保放大到calc(100%+5rem) */
        transform: scale(calc((100% + 5rem) / 90%));
        transform-origin: center; /* 从图片中心开始放大 */
    }
}

关键遗漏点 #

1. 未设置内部图片width: 100%，导致figure宽度无法随max-width扩展
2. margin-left设置错误，无法实现两侧均等溢出
3. 未主动让figure的实际宽度达到新的max-width上限

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