Почему выдаёт высоту 0?

Question

[Сергей Бобылев]

background: url("../img/new_img/item.png");
    background-repeat: no-repeat;
    background-size:100% , auto, cover;
    width: 100%;

суть такая, мне нужно чтобы изображение по ширине было 100%, а высота автоматом подгонялась, помогите пожалуйста

Comments

[Lynn «Кофеман»]

Фоновая картинка никак не влияет на размер элемента. Если у вас пустой div, то его высота будет 0 независимо от размера фоновой картинки. Указывайте высоту явно

Answer 1

[Сергей Бобылев]

в общем, решил вопрос таким образом. Взял ширину (экрана) за переменную и сделал вот так
:root{
--width-window: 100vw;
}
код блока :
background: url('../img/new_img/item.png');
background-size:100% auto, cover;
height: calc(var(--width-window)/4.7);
где 4.7 - результат деления ширины на высоту

Comments

[Andrew]

Интересно посмотреть как будет это выглядеть с шириной экрана 320px

[Ankhena]

height: calc(var(--width-window)/4.7);

А просто height: 21.27659vw что не позволило написать? Зачем браузеру каждый раз это считать (в данном случае)?

Обычно пропорции задаются паддингами.
https://jsfiddle.net/Ankhena/cLhxv7eq/

А ещё, если это пустой блок, то с большой долей вероятности это не блок вовсе, а псевдоэлемент.

Answer 2

[i_m]

background-size:100% auto;

Comments

[Сергей Бобылев]

не работает