title: Resize img proportionally with CSS (caveat: preset max-width/height)
body: <p>I have an overlarge image file, so I set desired max-width/height in pixels.
  Now I want that image to shrink with page resize, while maintaining aspect ratio.
  (In Chrome browser specifically, if that's relevant.)</p>
  
  <pre><code>&lt;img style="max-width: 700px" src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg"&gt;
  </code></pre>
  
  <p>I cannot for the life of me get this to work. I tried setting max-height.</p>
  
  <pre><code>img {
  max-height: 100vh;
  }
  </code></pre>
  
  <p>But while it resizes vertically very nicely, it doesn't resize horizontally. As in if the screen is too narrow, it overflows to the right.</p>
  
  <hr>
  
  <p>UPDATE:</p>
  
  <p>Okay, so best I've come up with is:</p>
  
  <pre><code>&lt;img style="width: 700px" src="http://static.photocdn.pt/images/articles/2017/04/28/iStock-516651882.jpg"&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>img {
  max-height: 100vh;
  max-width 100%;
  object-fit:scale-down;
  }
  </code></pre>
  
  <p>It works, it scales both ways ... it sometimes leaves a huge white-space between the image and the side borders when the image is scaled down. But I suppose that's better than a big whitespace gap above/below when you set img height instead. At least now it's not displacing my text (which is above/below, not around the image).</p>
  
  <p>Only real solution seems to be to go without borders. Not great aesthetically, but I may have to consider it 'good enough' unless someone has a better answer?</p>