title: Responsive Image with Max-height & Max-width
body: <p>I have this html and CSS</p>
  
  <pre><code>&lt;div class="kalim"&gt;&lt;img  src=""&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.kalim {display: inline-block;}
  
  .kalim img {max-width: 800px;width: auto;max-height: 800px;}
  </code></pre>
  
  <p>The problem with this code is that the images are not responsive in width when the browser is resized. If I set <code>width:100%</code> then the portrait images exceeding 800px in height become distorted. </p>
  
  <p>Is there a workaround for this, to make the image responsive and also have the max-height and max-width settings?</p>