如何使用CSS去除卡片内图片下方的多余空白

卡片组件内的图片预期占满卡片对应区域的完整宽度，实际渲染时图片下方存在固定区域的多余空白。已尝试设置height: 100%、width: 100%，以及配置object-fit: contain/cover等属性，均未解决问题。
Chrome开发者工具中的渲染效果如下：

复现代码 #

HTML结构 #

<div class="cards">
        <div class="card">
          <img src="./assets/shared/ai.svg" alt="" />
          <div class="body">
            <h3>Artificial Intelligence</h3>
            <p>
              Assertively parallel task synergistic <br />
              deliverables after high-quality.
            </p>
            <a href="#">Learn More</a>
          </div>
        </div>
        <div class="card">
          <img src="./assets/shared/ai.svg" alt="" />
          <div class="body">
            <h3>Civil Engineering</h3>
            <p>
              Assertively parallel task synergistic <br />
              deliverables after high-quality.
            </p>
            <a href="#">Learn More</a>
          </div>
        </div>
        <div class="card">
          <img src="./assets/shared/ai.svg" alt="" />
          <div class="body">
            <h3>Business Studies</h3>
            <p>
              Assertively parallel task synergistic <br />
              deliverables after high-quality.
            </p>
            <a href="#">Learn More</a>
          </div>
        </div>
      </div>

CSS样式 #

.cards {
  display: flex;
  flex-direction: row;
  width: 1421px;
  margin: 0 150px;
}
.cards .card {
  width: 453px;
  height: 512px;
  margin-right: 31px;
}

.cards .card:last-child {
  margin-right: 0px;
}

.card img {
  display: block;
  width: 100%;
  object-fit: contain;
  line-height: 0%;
}

该空白并非行内元素基线对齐导致的经典3px空白（你已经给img设置了display: block，这类问题已经被排除），核心原因有两点：

• 当前引用的是SVG格式图片，SVG文件本身未配置固定宽高比与视口约束，浏览器渲染时会按照替换元素的原生默认尺寸计算占位
• 你没有给图片设置明确的渲染高度，同时使用了object-fit: contain属性，该属性会强制保持图片原始比例缩放，缩放后未被图片填充的区域就会显示为空白

根据需求二选一即可：

• 如果允许图片适当裁切铺满区域（卡片场景最常用方案）：直接给图片设置对应区域的固定高度，将object-fit改为cover即可

.card img {
  display: block;
  width: 100%;
  height: 240px; /* 替换为设计稿中卡片图片区域的实际高度 */
  object-fit: cover;
}

• 如果要求图片完全显示不裁切：给图片外层套一层固定高度的容器，设置容器overflow: hidden，同时给SVG标签添加preserveAspectRatio="none"属性，让SVG拉伸铺满容器即可

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