Задать вопрос
@ligisayan
html

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

Есть блок с картинкой с заданной фоновой картинкой и минимальной высотой. Интересует, как с помощью стилей так, чтобы высота картинки подстраивалась под экран при его увеличении (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;
}
  • Вопрос задан
  • 1718 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Все условия задачи невыполнимы. Потому что:
1. экран может иметь любые размеры, в т.ч. любое соотношение сторон.
2. картинка может иметь любые размеры, и что более важно - любое соотношение сторон.

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

В более сложном варианте вы можете определить пропорции дива, но тут уже как вы понимаете, его высота будет величиной переменной, зато картинка будет идеально вписана. Однако, здесь есть еще один нюанс - нужно точно знать aspect ratio картинки. https://jsfiddle.net/6xzyokuh/7/
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 3
Daemon23RUS
@Daemon23RUS
https://jsfiddle.net/mLt2j6k2/
Возможно так: 50% от ширины viewport
Вариантов несколько, зависит от нюансов
Ответ написан
Комментировать
Комментировать
@tommy_13
background-position: center center;
Ответ написан
3 комментария
3 комментария
@kuzovok
Что-то никто не написал про волшебные единицы vh и vw (процент от высоты и ширины экрана, соответственно).
Задаёте, допустим, height: 80vh; width: 80vw:

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Парсер-бот на Python для ТГ-каналов
25 апр. 2024, в 17:35
4000 руб./за проект
Доработать сайт на CS-Cart (статусы товаров и цены)
25 апр. 2024, в 16:56
5000 руб./за проект
Внесение правок в мобильное приложение (Android)
25 апр. 2024, в 16:54
3000 руб./за проект
Ещё заказы