How To Auto Resize an Image to fit a div Container
How do I auto-resize an image to fit a div container
![How To Auto Resize an Image to fit a div Container How To Auto Resize an Image to fit a div Container](https://i.ytimg.com/vi/RkrTGQsv14k/hqdefault.jpg?custom=true&w=320&h=180&stc=true&jpg444=true&jpgq=90&sp=68&sigh=eCvhWuyCHTD0lyZ0Dhi-6XTOs0c)
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>