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

How To 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?


How to solve it ?, Here We Go..

Do not apply an explicit width or height to the image tag. Instead, give it:
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="">

Landscape Div
<div class="landscape">
<img src="">

Square Div
<div class="square">
<img src="">

I Hope This Article Be helped