Как сделать адаптивную картинку фоном?

Question

[leni_m]

body {
    background: url(img/1.png) no-repeat ;
    background-size: 100% auto;
    -moz-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    -o-background-size: 100% auto;
	}

Но если картинка получается больше по высоте чем высота экрана, то не видно низ картинки и нельзя проскролить. Указать явно высоту не хочется ,т.к. она для разной ширины экрана разная. Вобщем как можно добиться того чтобы можно было прокручивать картинку, которая стоит фоном, вниз?
У меня лишь идея: через js получать ширину экрана и исходя из пропорции картинки устанавливать height у body. Но разве нет решений в css?

Answer 1

[maxsnw]

bg-size cover\contain

Comments

[leni_m]

все равно у body высота 0 и нельзя прокрутить.

[maxsnw]

так дай высоту боди)

[leni_m]

maxsnw, я же все расписал. Например есть такие волшебные css как overflow:hidden; который задает блоку размеры, оборачивая все дочерние элементы. Я хочу спросить, в данном случае есть волшебные css или через js делать?

Answer 2

[frees2]

.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
Css-свойство object-fit определяет, как содержимое изменяемого элемента должно заполнять контейнер относительно его высоты и ширины.

Comments

[leni_m]

а через background: картинка; нельзя так сделать? без тега img

[frees2]

leni_m, вы можете даже видео туда вписать вместо рисунка и сделать фоном

object-fit:contain; то же самое background-size:cover; только и для всех других объектов