Responsive Image with Max-height & Max-width

Question

I have this html and CSS

<div class="kalim"><img  src=""></div>

CSS

.kalim {display: inline-block;}

.kalim img {max-width: 800px;width: auto;max-height: 800px;}

The problem with this code is that the images are not responsive in width when the browser is resized. If I set width:100% then the portrait images exceeding 800px in height become distorted.

Is there a workaround for this, to make the image responsive and also have the max-height and max-width settings?

Answer 1

You should add the width restriction to the outer element instead of the image. The outer element will not size over your max-width and max-height, but the image will always be 100% in width. This way your image will be responsive.

html

 <div class="kalim"><img src=""></div>

css

.kalim {display: inline-block; max-width: 800px; max-height: 800px;}

.kalim img {max-width: 100%; height:auto;}