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

【问题标题】：Why does the background image on one of my cards (out of 12) not display properly?为什么我的一张卡片（共 12 张）的背景图片无法正常显示？
【发布时间】：2021-02-13 17:35:04
【问题描述】：

无论出于何种原因，我的战士卡背景图像宽度与其他图像宽度不同。它们都通过 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;
    }
  }

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet

标签： html css sass flexbox grid

【解决方案1】：

战士中的文本比猎人中的多 - 如果将所有文本都设为 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>

【讨论】：