为什么我的一张卡片（共 12 张）的背景图像无法正确显示？

Question

不知为何，我的勇士卡背景图像宽度与其他的不同。它们都通过 mixin 共享相同的样式，并且所有图像的大小都相同。我可以在它上面强制一个最小宽度，它看起来不错，但不应该这样做，我想知道为什么它是唯一一个以这种方式表现的。我查看了 firefox 开发工具，但找不到答案。现场演示站点代码：混合：

@mixin bg-img {
  height: 100%;
  background-position: center 35%;
  background-repeat: no-repeat;
  background-size: cover;
}

卡片：

.card {
    border: 1px solid $border-color;
    border-radius: 0.25em;
    background: $card-bg;
    color: #fff;
    text-align: left;

    @media (min-width: 1280px) {
      display: flex;
    }

    &:hover {
      border: 1px solid $card-heading;
    }

    .bg-image {
      height: 253px;
      width: 100%;
    }

    .bg-war {
      background: url("../img/warrior.jpg");
      //   min-width: 244px;
      @include bg-img;
    }
    .bg-pal {
      background: url("../img/paladin.jpg");
      @include bg-img;
    }
    .bg-hunt {
      background: url("../img/hunter2.jpg");
      @include bg-img;
    }
    .bg-rog {
      background: url("../img/rogue2.jpg");
      @include bg-img;
    }
    .bg-prt {
      background: url("../img/priest2.jpg");
      @include bg-img;
    }
    .bg-dk {
      background: url("../img/dk2.jpg");
      @include bg-img;
    }
    .bg-sha {
      background: url("../img/shaman.jpg");
      @include bg-img;
    }
    .bg-mage {
      background: url("../img/mage2.jpg");
      @include bg-img;
    }
    .bg-lock {
      background: url("../img/warlock.jpg");
      @include bg-img;
    }
    .bg-monk {
      background: url("../img/monk.jpg");
      @include bg-img;
    }
    .bg-dru {
      background: url("../img/druid.jpg");
      @include bg-img;
    }
    .bg-dh {
      background: url("../img/demonhunter.jpg");
      @include bg-img;
    }

    .subtitle {
      font-size: 0.8rem;
    }

    .font-size-sm {
      font-size: 0.85rem;
    }

    .inner-text {
      padding: 20px;
    }
  }

Answer 1

warrior 中的文本比 hunter 中的文本多 - 如果您将所有文本都设置为 3 个字符长，则由于标题中的字母数量不同，图像的宽度都会不同。因此，您需要将 ps 包装在具有固定（相同）宽度

的 div 中

<div class="inner-text">
      <h2>warrior</h2><div style="width:300px">
      <p class="subtitle">tank, damage</p>
      <p class="font-size-sm card-text">
        For as long as war has raged, heroes from every race have aimed to
        master the art of battle. Warriors combine strength, leadership, and
        a vast knowledge of arms and armor to wreak havoc in glorious
        combat.
</p></div>
    </div>

为什么我的一张卡片（共 12 张）的背景图像无法正确显示？

Why does the background image on one of my cards (out of 12) not display properly?

html

css

grid

sass

flexbox