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

Question

[Надежда Головина]

Есть div. Фоном задано изображение. Но для каждого размера экрана - своя картинка.
Если указать высоту в %, то img на фоне просто пропадает. Видно только, когда высота абсолютная, в рх.
Как сделать так, чтобы вне зависимости от размера экрана, высота блока всегда выстраивалась автоматически по картинке в background?

Answer 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/

Comments

[Надежда Головина]

Спасибо. Помогло.
Немного подкорректировала под баннеры. При необходимости, можно больше background`ов сделать https://jsfiddle.net/Golovina_1990/tskgcjar/7/

Answer 2

[Степан Крапивин]

background-size: cover;

Comments

[Надежда Головина]

Вот тут не соглашусь.
На мобильнике вроде выстраивается. Но на десктопе нет:

[godsplane]

Надежда Головина, contain попробуйте тогда

Answer 3

[Shmulhe]

Для картинки просто надо прописать
object fit: cover
И она всегда будет растягиваться относительно размера блока без искажений