Looking for a Card design featuring a non-resized image against a grey background that is larger than the image itself. Although I have managed to set up the background and insert my chosen image, I am struggling to stop 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>
Desired outcome: https://i.sstatic.net/mdeUm.png
Actual result: https://i.sstatic.net/o7fhB.png