Запрет изменения размера изображения в загрузочной карте

Question

Мне нужна карта с изображением без изменения размера на сером фоне.Карта больше, чем размер изображения.Я получил фон и свое изображение, но мне не удается предотвратить изменение размера изображения.

<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>

Мне бы хотелось это

, ноЯ получил это

Answer 1

Поместите изображение в собственный контейнер DIV и используйте w-auto для переопределения ширины: поведение 100% card-img-top

         <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>

https://www.codeply.com/go/ACgUKJQMea

Answer 2

в вашем собственном файле CSS, добавьте дополнительное определение для .img-responseive

.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>