'How to "fix" image size inside card?

I have simple section with card with image and title. How can I fix image size inside the card, so it stays the same no matter what is the actual size of the original image?

<section class="page-section bg-primary">
<div class="container mx-auto mt-4">
    <h2 class="page-section-heading text-center text-uppercase text-secondary mb-5 mt-5">Card section</h2>
    <div class="row">
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img src="~/images/img.jpeg" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                        </div>
                    </div>
                </div>
    </div>
</div>
htmlcssimage


Solution 1:[1]

Just put the Width of the image 100% so it will take 100% of its father (card) width or you can also use the max-width exp:

<img style="max-width: 100%;"

Solution 2:[2]

Inside the tag

<img src="~/images/img.jpeg" class="card-img-top" alt="..." style="width:100%;">

or with css in a class:

css:

.myimage{
   width:100%;
}

<img src="~/images/img.jpeg" class="card-img-top myimage" alt="...">

You can size between 1% - 100% to the parent div/tag.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BakaaCode
Solution 2

Related Questions