如何正确控制卡片内图片的尺寸-html教程-PHP中文网

在 Bootstrap 卡片（Card）中，若为同时设置 width 和 height 属性与 style，会导致内联样式被 HTML 属性覆盖，从而无法响应式调整图片尺寸。正确做法是统一使用 style 声明宽高，并确保 CSS 优先级可控。

在 bootstrap 卡片（card）中，若为 `` 同时设置 `width` 和 `height` 属性与 `style`，会导致内联样式被 html 属性覆盖，从而无法响应式调整图片尺寸。正确做法是统一使用 `style` 声明宽高，并确保 css 优先级可控。

Bootstrap 的 .card-img-top 类默认会将图片宽度设为 100%，并保留原始宽高比。当你在标签中同时使用 HTML 属性 width="75px" 和 style="max-width:90%" 时，浏览器会将 width 属性解析为等效于 style="width: 75px"，但它属于“HTML 呈现属性”，其优先级与 style 中声明的样式相同——而由于 width 属性在 style 之后（或解析顺序上无明确先后），实际渲染可能不一致，尤其在现代浏览器中更倾向以 style 为准，但 width/height 属性还可能触发固有尺寸逻辑，干扰 object-fit 或响应式行为。

✅ 正确写法：所有尺寸控制统一收口至 style，并推荐添加 object-fit: cover 或 contain 以精确控制裁剪/缩放：

<div class="row">
  <div class="col">
    <div class="card">
      <img src="rec_50th_anniversary.jpg" class="card-img-top"  style="max-width:90%" alt="50th Anniversary"><div class="card-body text-center">
        <p class="card-text">My Chapter held its <br>50th Anniversary celebration in October 2021</p>
      </div>
    </div>
  </div>
</div>

⚠️ 注意事项：

不要混用 width/height HTML 属性与 style 中的尺寸声明，否则易引发不可预测的尺寸覆盖；
若需响应式适配（如在小屏自动缩小），建议改用相对单位（如 max-width: 100%; height: auto;）配合容器约束；
Bootstrap 5+ 中，.card-img-top 默认 display: block 且 width: 100%，因此强制固定尺寸时务必用 !important（不推荐）或提高选择器特异性（更优）；
如需居中显示，text-center 应作用于父容器（如 .card-body），而非
（已废弃的 HTML4 属性）。

? 总结：语义清晰、样式集中、避免过时属性——将尺寸控制完全交由 style 或外部 CSS 管理，是保障卡片图片行为可预测、可维护的关键实践。