Как сделать изображение на фоне полном не изменяя его размера?

Question

[DanilaBodrov]

Как сделать фоновое изображение в полном размере? Постоянно обрезается. Задавал %, VH, cover, contain. Спасибо за ответы)

Answer 1

[Максим]

ну это просто, для этого в css пишем для html,body : height:100%
а нужному блоку высоту 100% и background:url(...); background-size:100% 100%;
и всё

Answer 2

[Анатолий]

Соотношение сторон изображения и монитора никто не отменял :)

img {
    width: 100%;
    height: auto;
}

Comments

[DanilaBodrov]

Картинка получается большого размера и обрезана, а не полностью подстраивается под монитор.

[Анатолий]

DanilaBodrov, У вас в любом случае картинка будет обрезаться, если не имеет такое же разрешение, как у монитора (соотношение сторон как минимум)

[DanilaBodrov]

Анатолий, Если я обрежу по ноут, то как она будет смотреться на 1920x1080? Получается нужно медиа запросы со сменой фона делать?

Answer 3

[Монти Пайтон]

сделать разные фоновые изображения под разные соотношения сторон и через медиазапросы выставить подставления

Comments

[Кирилл Инкогнатович]

это слишком сложно, можно одной строчкой решить

[Монти Пайтон]

Артём Инкогнатович, хз без понятия как, просто сказал что думал, так как есть разные форматы, планшеты например айпад новые до сих пор идут 4:3, а телефоны 18:9 или даже уже 19:9 как вы это решите, тогда будет обрезаться по краям по типу того как масштабируется видео при убирании чёрных полосок снизу и сверху, если вы предлагаете скейлить то тогда люди будут "яйцеголовые" а машины на изображениях как будто после краштеста с кирпичной стеной втянутые, ведь мы же говорим об Device-Agnostic - правильно?

ps не кодер

[Монти Пайтон]

Артём Инкогнатович, в HTML5 есть ещё какойто <picture> но ещё не вникал