title: Object fit and height
body: <p>I am trying to write code that either 'contains' or 'covers' an image based on browser dimensions. Everything works as expected with the exception that if the height of the window is lesser than the width, the image get cropped even when using contain.</p>
  
  <p>I have the following CSS code:</p>
  
  <pre><code>.object-fit_cover { object-fit: cover; width:100%; height:auto;}
  .object-fit_contain { object-fit: contain; max-width:100%; height:auto; }
  </code></pre>
  
  <p>My HTML code to show an image </p>
  
  <pre><code>&lt;img  ng-src="&lt;myimage&gt;" ng-class="{'object-fit_cover':imageFit==false, 'object-fit_contain':imageFit==true}" /&gt;
  </code></pre>
  
  <p>When the height is larger than the width - things are perfect, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/RiiX1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RiiX1.png" alt="enter image description here"></a></p>
  
  <p>But when I stretch the width to be larger than the height, it crops the image, even if I switch to object-fit:contain</p>
  
  <p><a href="https://i.stack.imgur.com/lTFqh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lTFqh.png" alt="enter image description here"></a></p>
  
  <p>What I really want is, if I am using class="object-fit_cover" then the image should fill the window and if I switch to using class="object-fit_contain" then the image should always show in its entirety - this does not happen in the second example I sighted above.</p>
  
  <p>Thanks</p>