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

Posted 2023-02-23

【中文标题】如何在 vue bootstrap 中自定义卡片的图像大小

【英文标题】：How to customize image size for card in vue bootstrap

【发布时间】：2020-10-10 18:46:14

【问题描述】：

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

<b-card
          bg-variant="primary"
          text-variant="white"
          img-
          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）自定义图像的样式？文档对我没有帮助。

【参考方案1】：

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

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

【讨论】：

您好 Boussadjrai，感谢您的回答。你的方法绝对是个好方法！但不幸的是，它不够灵活，无法像我想要的那样定位图像。我想我会通过 SCSS 来操作它。还是谢谢！

还有img-topimg-start等其他道具，请查看img-*的完整列表bootstrap-vue.org/docs/components/card#comp-ref-b-card