title: CSS: auto calc height of element to match the background-image
body: <p>I want a section of my site (banner) to be an image that fit all width and for the image to maintain the full width (not the px width, but in percentage) at all times. I don't care about the height being too low, I need the image to always show all the width content and the height to be auto.</p>
  
  <p>I'm using <code>background-size: contain</code> and this keeps the full width of the image but the height needs to be calculated, because then the container height will be higher than the image's. I've tried using viewport units but it's not consistent between different resolutions (maybe I'm doing it wrong but the value for a higher resolution doesn't work for a lower one).</p>
  
  <p>How would I make this responsive?</p>
  
  <p>The markup:</p>
  
  <pre><code>&lt;body&gt;
      &lt;section class="feat-bottom"&gt;
          &lt;h4&gt;some title&lt;/h4&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm using CSS for this image because, as we all (should) know, design images don't belong in the markup. So the image has to fit all the width, what would be the difference between 100% and 100vw? The first one is the parent's width, body has all the width in the screen and the second is the (again?) the device's width?</p>
  
  <p>Will this approach be compatible with tablets and phones? Should I use a second image optimized for these cases?</p>