title: Full browser width responsive background image with fixed height
body: <p>I know this type of question has been asked a million times, and seemingly there are tons of duplicates, but I have not been able to find documentation on or figure out how to very specifically:</p>
  
  <ol>
  <li>Make the image 100% width of the browser window.</li>
  <li>Make the image a background image.</li>
  <li>Make the image responsive.</li>
  <li>Make the image have an adjustable fixed height. ( meaning I can make it <code>500px</code> tall or <code>800px</code> tall and it retains its aspect ratio and full browser width )</li>
  </ol>
  
  <p>Is this possible to do with pure css or is jquery or javascript required?</p>
  
  <p>I am open to bootstrap techniques as well.</p>
  
  <p>Currently I have this technique but it's limiting in that I can't really define the height and the image gets cropped when I put content inside.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="page-section"&gt;
      &lt;?php if( get_field('landing_hero_image') ): ?&gt;
          &lt;div class="hero-img-wrap"&gt;
              &lt;div class="landing-hero" style="background-image: url(&lt;?php the_field('landing_hero_image'); ?&gt;);"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;?php endif; ?&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.page-section {
      width:100%;
      position: relative;
  }
  .landing-hero {
      padding: 22% 0 20% 0;
      margin:auto;
      width: 100%;
      min-height: 100%;
      -webkit-background-size: cover !important;
      -moz-background-size: cover!important;
      background-size: cover!important;
      -o-background-size: cover!important;
  }
  </code></pre>