I want a Card that has a non-resized image with a grey background. The Card is bigger than the size of the image. I got the background and my image, but I don't manage to prevent the image from resizing.

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

I would like this what I want

but I got thiswhat I have

2 Answers

1
Zim On Best Solutions

Put the image in its own container DIV, and use w-auto to override the width:100% behavior of 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

0
Anurag R On

in your own CSS file, add an additional definition for .img-responsive

.img-responsive 
{ 
    width:100%;
}

replace code to

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