How to "fix" image size inside card?-CodePudding

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 >
<div >
    <h2 >Card section</h2>
    <div >
                <div >
                    <div  style="width: 18rem;">
                        <img src="~/images/img.jpeg"  alt="...">
                        <div >
                            <h5 >Card title</h5>
                        </div>
                    </div>
                </div>
    </div>
</div>

CodePudding user response：

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%;"

CodePudding user response：

Inside the tag

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

or with css in a class:

css:

.myimage{
width:100%;
}

<img src="~/images/img.jpeg"  alt="...">

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