Golovina90
@Golovina90
Начинающий Web-Master

Как сделать адаптивный div с img на фоне?

Есть div. Фоном задано изображение. Но для каждого размера экрана - своя картинка.
Если указать высоту в %, то img на фоне просто пропадает. Видно только, когда высота абсолютная, в рх.
Как сделать так, чтобы вне зависимости от размера экрана, высота блока всегда выстраивалась автоматически по картинке в background?
5ece2436e1858219380667.jpeg
  • Вопрос задан
  • 3044 просмотра
Решения вопроса 1
@DaBags
Почему бы не ставить 2 картинки и на разных разрешениях экрана скрывать одну из них?
Как костыль попробуйте такое:
Убрать height блока
.ovca {
background-image: url('https://art-coupe.ru/bitrix/images/ovca.jpg');
background-size: 100%;
padding-bottom: 6.51%;
}
media screen and (max-width: 736px) {
.ovca {
background-image: url('https://art-coupe.ru/bitrix/images/376-ovca.jpg');
padding-bottom: 22.66%;
}
}

padding-bottom = высота картинки / ширина картинки

Пример: https://jsfiddle.net/gry7xdbt/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
background-size: cover;
Ответ написан
@Shmulhe
Для картинки просто надо прописать
object fit: cover
И она всегда будет растягиваться относительно размера блока без искажений
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы