卡片内图片尺寸无法随卡片调整而改变的技术问题

以下代码可正常显示，但调整卡片的高度和宽度时，图片不会随之变化，始终保持原有尺寸：

<div class="row">
<div class="column">
  <!--<h2 align="center">Column 1</h2>-->
   <img src="rec_50th_anniversary.jpg"   style="height:40px"  width="75px"  class=" card-img-top  center" alt="anniversary">
<p align="center">My Chapter held its <br> 50th Anniversary celebration in October 
2021</p>

你给图片设置了固定的height和width（行内样式里的height:40px和width:75px），这相当于把图片尺寸硬编码固定，容器（卡片）尺寸变化时，图片不会自动适配。

方法1：替换为响应式样式 #

把固定宽高改成自适应设置，让图片跟随容器缩放：

<img src="rec_50th_anniversary.jpg" style="max-width:100%; height:auto;" class="card-img-top center" alt="anniversary">

• max-width:100%：限制图片最大宽度不超过容器宽度
• height:auto：自动保持图片原宽高比，避免拉伸变形

方法2：利用Bootstrap自带特性 #

你用到了Bootstrap的card-img-top类，这个类本身就支持响应式适配卡片，直接去掉自定义的固定宽高样式即可：

<img src="rec_50th_anniversary.jpg" class="card-img-top center" alt="anniversary">

图片会自动填满卡片宽度，同时保持自身比例，卡片尺寸变化时图片也会同步调整。

内容的提问来源于stack exchange，提问作者jack