CSS Grid中将figure背景图替换为img标签后布局损坏如何解决

问题原因 #

你遇到的布局错乱有两个核心原因：

1. CSS Grid 的 grid-column、grid-row 等跨度属性仅对容器的直接子元素生效。你将原本作为 .cover 直接子元素的 figure 套入 a 标签后，a 变成了 Grid 容器的直接子节点，原本写在 figure 类上的跨度属性没有作用在 Grid 子元素上，直接导致网格布局崩塌。
2. 你原本的 figure 是通过 padding-top 撑开自适应宽高比，直接将 img 作为普通流元素放入 figure 后，图片本身的高度会和 padding-top 叠加，导致卡片高度超出预期。

解决方案（推荐，无需修改原有类定义，适配成本最低） #

该方案完全保留你原有的类分配逻辑，后端生成卡片时仅需调整内部嵌套结构即可，布局效果和之前完全一致。

1. HTML结构调整 #

将 a 标签放在 figure 内部，保持 figure 仍是 .cover 的直接子元素，原有类（horizontal/small/large/vertical）仍然加在 figure 上即可：

<section class="cover">
  <figure class="horizontal">
    <a href="">
      <img src="https://via.placeholder.com/1350x700.png?text=1350x700" alt="图片描述">
    </a>
  </figure>
  <figure class="small">
    <a href="">
      <img src="https://via.placeholder.com/700x700.png?text=675x700" alt="图片描述">
    </a>
  </figure>
  <figure class="small">
    <a href="">
      <img src="https://via.placeholder.com/700x700.png?text=675x700" alt="图片描述">
    </a>
  </figure>
  <figure class="small">
    <a href="">
      <img src="https://via.placeholder.com/700x700.png?text=675x700" alt="图片描述">
    </a>
  </figure>
  <figure class="small">
    <a href="">
      <img src="https://via.placeholder.com/700x700.png?text=675x700" alt="图片描述">
    </a>
  </figure>
</section>

2. 新增CSS适配规则 #

不用修改任何原有CSS，仅需新增以下规则，即可保证图片填充效果和之前的背景图完全一致：

/* 让a标签填满整个figure区域 */
figure a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 图片填充规则，和原background-size: cover效果一致 */
figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

可选方案（如果你必须用a标签包裹figure） #

如果业务要求必须用a作为figure的父元素，只需做以下调整：

1. 将原本加在figure上的horizontal/small等类，改加在对应的a标签上
2. 新增以下CSS规则：

/* 让a标签继承原figure的定位属性 */
.cover > a {
  position: relative;
  margin: 1px;
}
/* 重置figure的边距，让它填满父级a标签 */
.cover > a figure {
  margin: 0;
  width: 100%;
  height: 100%;
  padding-top: 0 !important;
}
/* 图片填充规则同上 */
figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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