Stop images stretching when adding them to a bootstrap card etc when they are smaller than their parent div

Question

(New to SO and fairly new to coding)

Is there a unique class or HTML/CSS code that i can use to prevent this from happening to preserve image resolution and responsiveness?

As you can see i have added the container class to the outermost div to center the cards and the .img-fluid/.img-responsive classes for responsiveness. This helped a lot but there's something missing that i can't quite put my finger on.

<div class="card-deck container center-block">    

            <div class="card">

                <img id="web-design" class="card-img-top img-fluid image-responsive" src="./img/html_css_javascript.png" alt="Card image cap">

                <div class="card-block">

                <h4 class="card-title">Card title</h4>

                </div>

            </div>

        <div class="card">

                <img id="bootstrap" class="card-img-top img-fluid image-responsive" src="./img/bootstrap.png" alt="Card image cap">

                <div class="card-block">

                <h4 class="card-title">Card title</h4>

                </div>

        </div>

        <div class="card">

                <img id="j-query" class="crd-img-top img-responsive img-fluid" src="./img/jquery.png" alt="Card image cap">

                <div class="card-block">

                <h4 class="card-title">Card title</h4>

                </div>

        </div>      

Answer 1

I've figured it out! Found a great tutorial on this.

Adding the following html code to individual image tags (using the width and height of the cards specified in the documentation) i was able to preserve resolution and responsiveness.

 width="190" height="200"