为img添加a标签导致网格布局错乱、图片重叠的问题求助

问题根源 #

你的.image-grid容器直接子元素现在同时包含<img>和<a>，但原CSS仅对直接子元素<img>设置了Grid布局的适配样式，<a>作为新的Grid子项没有继承相同的尺寸约束，同时<a>内部的<img>也没有被正确设置填满容器的样式，导致布局错位、图片重叠。

修复方案 #

修改CSS，让Grid容器的所有直接子元素（无论<img>还是<a>）都遵循Grid布局规则，同时确保<a>内部的<img>也能填满容器：

• 将.image-grid>img的样式扩展到所有直接子元素，改为.image-grid>*
• 给<a>内部的<img>添加填满容器的样式，确保object-fit: cover生效
• 修正媒体查询中的拼写错误（--row-heigth → --row-height，原拼写错误会导致移动端行高不生效）

修改后的完整CSS代码 #

.image-grid {
    --gap: 16px;
    --num-cols: 4;
    --row-height: 300px;

    box-sizing: border-box;
    padding: var(--gap);
    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
}

/* 让所有Grid直接子元素（img和a）都适配Grid布局 */
.image-grid>* {
    width: 100%;
    height: 100%;
}

/* 确保a标签内的img也填满容器并保持比例 */
.image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-grid a {
    text-decoration: none;
    display: block;
    box-sizing: border-box;
}

.image-grid img:hover {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.5s; /* 明确指定过渡属性，避免不必要的性能消耗 */
}

.image-grid-col-2 {
    grid-column: span 2;
}

.image-grid-row-2 {
    grid-row: span 2;
}

@media screen and (max-width: 1024px) {
    .image-grid {
        --num-cols: 2;
        --row-height: 200px; /* 修正拼写错误 */
    }
}

统一结构的HTML代码（可选） #

为了保持布局结构一致，建议给所有图片都包裹<a>标签：

<div class="image-grid">
    <a href="#" class="image-grid-col-2 image-grid-row-2">
        <img src="https://i.imgur.com/lGLKiVd.png" alt="Star of Libby P1">
    </a>
    <a href="#"><img src="https://i.imgur.com/lGLKiVd.png" alt="Star of Libby P1"></a>
    <a href="#"><img src="https://i.imgur.com/lGLKiVd.png" alt="Star of Libby P1"></a>
    <a href="#"><img src="https://i.imgur.com/lGLKiVd.png" alt="Star of Libby P1"></a>
    <a href="#"><img src="https://i.imgur.com/lGLKiVd.png" alt="Star of Libby P1"></a>
</div>

效果说明 #

• 所有Grid子元素（包括<a>）都将遵循Grid的列宽、行高和间距设置
• <a>内部的<img>会填满容器，保持object-fit: cover的裁剪效果
• 鼠标悬停的透明度过渡效果正常生效
• 移动端布局也能正确应用修改后的行高

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