title: How to make background-image size height always equal what the image height needs to be for full width image?
body: <p>How do I make an image always have the same crop height. As in on this site <a href="http://deliciousproductions.com.au/" rel="nofollow">http://deliciousproductions.com.au/</a> the div is 420px high. But the image extends further. </p>
  
  <p>Here's the div</p>
  
  <pre><code>&lt;div class="dpsplash"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.dpsplash {
      background-image: url('/img/banner1.png');  
      background-size: auto 800px;
      height: 400px;
      background-position: center top;
      background-repeat: no-repeat;
  }
  </code></pre>
  
  <p>So what this does is make the image height so that when you resize the page horizontally it doesn't shift the point where you crop the image for the div height, but instead extends the width. Buuuut we run into a problem because I have to guess the image height for a full width drawing on bigger resolutions where the image won't be shorter than 400px if displayed at full width, because if a 2500x1200 image is displayed at full width on a phone, it's gonna end before the div does, looking ugly.</p>
  
  <p>I feel like in maths/javascript it should be that [(current page width)/(image width)] * (image height) = (the height it needs to be) or x, so the background-size style should be <code>background-size: auto (that formula from above?);</code></p>
  
  <p>I know basically no Javascript, it's so confusing but I understand logic arguments. </p>