0 votes
1 view
in Web Technology by (14.7k points)

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?

1 Answer

0 votes
by (33.1k points)

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;

} 

...