How can I make the height of the block with the picture itself adapt to the screen?

Question

css

There is a block with an image with a given background image and a minimum height. Interested in how to use styles so that the height of the picture adjusts to the screen when it is enlarged (min-height changes), i.e. in fact, so that the picture with the inscription is not hidden behind the block, but is always logically located in the center, is full width and maintains proportions on any screen resolutions. Fiddle
<div class="background"></div>

.background {
    background-image: url(http://user2026286.atservers.net/img/background.jpg);
    background-size: cover;
    height: 1px;
    min-height: 250px;
}

Answer 1

All conditions of the task are impossible to fulfill. Because:
1. the screen can be of any size, incl. any aspect ratio.
2. The picture can have any size, and more importantly, any aspect ratio.
You can make certain assumptions, then the decision will be.
The simplest thing that comes to mind is to stretch the div to its full height, make the image centered and set one of two options for fitting the image:
cover , when the image occupies the entire area of ​​the object, and the excess is cut off https://jsfiddle.net/6xzyokuh/3 /
or contain , when the image fits proportionally into the object, and empty stripes appear https://jsfiddle.net/6xzyokuh/5/
In a more complex version, you can determine the proportions of the div, but here, as you understand, its height will be a variable value, but the picture will fit perfectly. However, there is one more nuance here - you need to know exactly the aspect ratio of the picture. https://jsfiddle.net/6xzyokuh/7/

Answer 2

https://jsfiddle.net/mLt2j6k2/
Maybe like this: 50% of the viewport width
There are several options, depending on the nuances

Answer 3

background-position: center center;

Answer 4

Nobody wrote something about the magic units vh and vw (percentage of the height and width of the screen, respectively).
Set, say, height: 80vh; width: 80vw:
With background-size: cover; should work. True, it is better to position the bg picture then, too, so that it is more predictable which part of it will be shown.