如何在 vue bootstrap 中自定义卡片的图像大小

Question

我正在开发一个 NuxtJS 项目，使用 BootstrapVue 作为前端框架。我正在尝试使用以下代码编辑插入卡片标题中的图像的大小：

<b-card
          bg-variant="primary"
          text-variant="white"
          img-alt="Image"
          img-src="~/assets/images/house.png"
          header="The house"
          class="text-center position-relative"
        >
          <b-card-text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </b-card-text>
          <b-button variant="primary" class="paragraph stretched-link"
            >Click here</b-button
          >
        </b-card>

有谁知道是否可以通过 b-card 属性（没有 CSS）自定义图像的样式？文档对我没有帮助。

Answer 1

您可以使用img-height 和img-width 提供卡片内的图像大小，它们接受字符串或数字作为值：

<b-card
          bg-variant="primary"
          text-variant="white"
          img-alt="Image"
          img-src="~/assets/images/house.png"
          img-height="200"
          img-width="200"
          header="The house"
          class="text-center position-relative"
        >