为何SVG图片的aspect-ratio属性无法生效？

1. 修正CSS选择器错误 #

你当前的CSS选择器.card-img img完全错误——HTML里的<img>标签本身就带有card-img类，不存在嵌套结构，必须直接选择.card-img：

.card-img {
  aspect-ratio: 2 / 3;
  width: 100%;
}

2. 排除SVG自身属性的干扰 #

SVG的内部属性会优先于CSS规则，导致aspect-ratio失效：

• 打开你的SVG文件，检查根标签<svg>，必须包含viewBox属性（比如viewBox="0 0 200 300"，对应2:3的比例），同时把width和height设为100%或auto：

  <svg viewBox="0 0 200 300" width="100%" height="auto" ...>
    <!-- SVG内容 -->
  </svg>
  

• 如果SVG里写死了width/height的固定数值，CSS的aspect-ratio会被直接忽略。

3. 避免flex布局挤压图片 #

你的.card是flex容器，需要防止布局拉伸破坏图片比例：
给.card添加align-items: flex-start，确保图片保持自身尺寸：

.card {
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  align-items: flex-start;
}

完整修正后的关键CSS片段 #

.card-img {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover; /* 可选：图片比例不符时保持裁剪不拉伸 */
}

.card {
  display: flex;
  flex: 0 0 250px;
  flex-direction: column;
  align-items: flex-start;
}

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