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

Question

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

Answer 1

To auto-resize an image to fit a 'div' container you can use the below-mentioned piece of code:-

max-width:100%;

max-height:100%;

If you want to specify a width only do height: auto;.

See the example below:-

img {

max-width: 100%; 

max-height: 100%;

}

.portrait { 

height: 80px;

width: 30px;

}

.landscape { 

height: 30px;

width: 80px;

}

.square {

height: 75px;

width: 75px;

}