title: Image: I need 100% height to be more important than 100% width
body: <p>Basically I have an image that needs to stay 100% height no matter the screen size, so its responsive, and its ok to cut off the left and right sides (just not the top and bottom).</p>
  
  <p>I currently have the image set to be responsive for both height and width, but at certain widths and heights it cuts the top and bottom off the image.</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.banner{
      width:36%;
      float:left;
      min-height: 100vh;
      height: 100%;
  }
  
  .banner img {
      display: block;
      width: 100%;
      height: 100vh;
      object-fit: cover;
  }
  </code></pre>
  
  <p>PHP (Wordpress):</p>
  
  <pre><code>&lt;div class="banner"&gt;    
      &lt;?php the_post_thumbnail(); ?&gt;
  &lt;/div&gt;
  </code></pre>