How to make background-image size height always equal what the image height needs to be for full width image?

Question

How do I make an image always have the same crop height. As in on this site http://deliciousproductions.com.au/ the div is 420px high. But the image extends further.

Here's the div

<div class="dpsplash">
</div>

css

.dpsplash {
    background-image: url('/img/banner1.png');  
    background-size: auto 800px;
    height: 400px;
    background-position: center top;
    background-repeat: no-repeat;
}

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.

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 background-size: auto (that formula from above?);

I know basically no Javascript, it's so confusing but I understand logic arguments.

Answer 1

Do you mean background-size: cover; ? What it does ( source ):

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

Answer 2

Yea, I'm not entirely sure what you're asking and your comment didn't particularly clear that up for me.

All I took out of this is that you want the image to look similar or the same on higher resolution screens? For one, if you want to test that you can zoom out on your browser to get an estimate on what it would look like on higher dpi screens. There's also a mobile emulator as part of Chrome's devtools that will simulate higher dpi's.

As to your question, if the question is how can you maintain the aspect ratio as well as keep the image at 100% the width past 1080p, a simple solution would be to add a media query that forces width 100% past a screen width of 1920 pixels. Which would look like width: 100%; . If that doesn't look exactly right to you, you could try setting the width past 100% at a value like 150% so it takes up a similar sized portion of the screen as earlier. If that is not your question and you want the image to scale with the dpi, experiment with the values vh and vw which will do just this. They stand for viewport height and width. You can also set the maximum width, height, vw, and vh with max-height/width and vmin/max