How do I auto-resize an image to fit a div container

Someone give me an Question.

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?

Answer:

How to solve it ?, Here We Go..

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Example: jsfiddle

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

I Hope This Article Be helped

How To Auto Resize an Image to fit a div Container

PermaLink: https://www.webmanajemen.com/2017/05/how-to-auto-resize-image-to-fit-div-container.html

---

Google Rich Snippets | Schema Markup Validator | Google Pagespeed Insight