Как сделать, чтобы высота блока с картинкой сама подстраивалась под экран?

Question

[ligisayan]

Есть блок с картинкой с заданной фоновой картинкой и минимальной высотой. Интересует, как с помощью стилей так, чтобы высота картинки подстраивалась под экран при его увеличении (min-height изменялся), т.е. фактически чтобы картинка с надписью не скрывалась за блоком, а была всегда логически расположена по центру, была на всю ширину и сохраняла пропорции на любых разрешениях экранов. Фидл
<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

[Сергей delphinpro]

Все условия задачи невыполнимы. Потому что:
1. экран может иметь любые размеры, в т.ч. любое соотношение сторон.
2. картинка может иметь любые размеры, и что более важно - любое соотношение сторон.

Можно сделать определенные допущения, тогда решение будет.
Самое простое, что приходит в голову - растянуть див на всю высоту, картинку сделать по центру и задать один из двух вариантов вписывания изображения:
cover, когда картинка занимает всю площадь объекта, а излишки обрезаются https://jsfiddle.net/6xzyokuh/3/
или contain, когда картинка пропорционально вписывается в объект, и появляются пустые полосы https://jsfiddle.net/6xzyokuh/5/

В более сложном варианте вы можете определить пропорции дива, но тут уже как вы понимаете, его высота будет величиной переменной, зато картинка будет идеально вписана. Однако, здесь есть еще один нюанс - нужно точно знать aspect ratio картинки. https://jsfiddle.net/6xzyokuh/7/

Comments

[ligisayan]

Сергей если исходить от того, что картинка известна (заданная) - для нее условия сложного варианта будут выполняться всегда - так?

Answer 2

[Daemon23RUS]

https://jsfiddle.net/mLt2j6k2/
Возможно так: 50% от ширины viewport
Вариантов несколько, зависит от нюансов

Answer 3

[tommy_13]

background-position: center center;

Comments

[ligisayan]

tommy_13 обрезается голова девушки https://jsfiddle.net/6xzyokuh/6/ , а хотелось бы, чтобы при увеличении экрана - картинка вырастала пропорционально, а не все время оставалась заданного размера, иначе теряется смысл этих строк

height: 1px;
    min-height: 250px;

[tommy_13]

пустой. если нужны пропорции указывай высоту в vh

[ligisayan]

tommy_13: выше дан идеальный кроссбраузерный вариант

Answer 4

[kuzovok]

Что-то никто не написал про волшебные единицы vh и vw (процент от высоты и ширины экрана, соответственно).
Задаёте, допустим, height: 80vh; width: 80vw:

При background-size: cover; должно работать. Правда, картинку бг лучше тогда тоже позиционировать, чтобы было более предсказуемо, какая её часть будет показываться.

Comments

[ligisayan]

kuzovok спасибо, выше дан идеальный кроссбраузерный вариант (у многих мамочек да-да до сих пор еще ie8)