Как сделать изображение на 100% экрана без обрезания?

Question

[Роман Тузов]

Сейчас изображение вставляется с обрезанием сверху и снизу, а нужно, чтобы оно вставало как в оригинале.
Так вставлял изображение на сайт:

background: url(../img/artificial-grass-4056458.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

С обрезанием:

Как хочу, чтобы было:

Comments

[Роман Тузов]

hellcaster, что не так?

[Роман Тузов]

hellcaster, у меня видно почему-то

Answer 1

[Spartak (Web-StyleStudio)]

background-size: contain;
Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.

Comments

[Роман Тузов]

а по ширине как растянуть?

[Кирилл Молчанов]

Роман Тузов, так вы же понимаете, что тогда картинка будет отображаться неправильно?

[Dmitry Bay]

Роман Тузов, эм, вы определитесь как вам необходимо, contain растягивает по доступной высоте - ширине.
А cover - покрывает на 100% по минимальной высоте или ширине.

[Spartak (Web-StyleStudio)]

Роман Тузов,
htmlbook.ru/css/background-size

[Кирилл Молчанов]

Роман Тузов, просто используйте background-size: 100% 100%; и поймите, что не так

[Роман Тузов]

Spartak (Web-StyleStudio), ну я так и предполагал, спасибо

[Spartak (Web-StyleStudio)]

Роман Тузов, пожалуйста

[aidarDev]

hellcaster, какая же жиза)