Css 防止在引导卡中调整图像大小

我想要一张有灰色背景的未调整大小图像的卡。卡的大小大于图像的大小。 我得到了背景和我的图像，但我没有设法阻止图像调整大小

<div className ="container" id="mainContainer">
  <div className ="row mt-4">
    <div className="col-md-4">
      <div className="card" >
        <img  className="card-img-top bg-light mb-3" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
         </img>
         <div className="card-img-overlay">
           <span className="badge badge-dark"> 1 </span>
         </div>
         <div className="card-body">
           <h5 className="card-title"> Bulbasur  </h5>
           <span className="badge badge-light"> poison </span>
         </div>
      </div>
  </div>
</div>

1.
巴斯尔
毒药

我想要这个

---

但是我在您自己的CSS文件中得到了这个

，为.img添加了一个额外的定义

.img-responsive 
{ 
    width:100%;
}

将代码替换为

<img  className="card-img-top bg-light mb-3 img-responsive " alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
</img>

---

将图像放入其自己的容器DIV中，并使用

w-auto

覆盖宽度：卡img top的100%行为

         <div class="card">
            <div class="text-center bg-light">
                <img class="card-img-top mb-3 w-auto" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
            </div>
            <div class="card-img-overlay">
                <span class="badge badge-dark"> 1 </span>
            </div>
            <div class="card-body">
                <h5 class="card-title"> Bulbasur  </h5>
                <span class="badge badge-light"> poison </span>
            </div>
        </div>

1.
巴斯尔
毒药

---

这不会产生我想要的图片。灰色背景未覆盖所有图像空间，然后将

bg light

移动到包含的div