Изображение на весь экран без потери качества?

Question

[dsvsd]

Необходимо показывать изображение пользователю на весь экран без потери качества для разных разрешений/соотношений сторон.

Answer 1

[Максим Тимофеев]

background-size: cover;

Answer 2

[dom1n1k]

В чем конкретно проблема?
Проще всего взять большую качественную картинку и сказать ей background-size: cover. Этот вариант простой и рабочий, но заставляет владельцев мобильников качать лишний трафик.
Чтобы этого избежать, делается несколько картинок разного размера и разруливаются при помощи media-выражений.
Дополнительно имеет смысл сделать ещё плейсхолдер в виде очень мелкой картинки, заинлайненной прямо в CSS как base64 - чтобы занимать место в те секунды, пока грузится основная картинка.

Answer 3

[HelpSophie]

1. background-size: cover;
2. object-fit для img
3. разные картинки для разных экранов, разрешений, плотности пикселей и ориентации: тег picture
4. разные картинки в media

Если это одна картинка и она скажем 4000x4000px, то пользователи с мобильным интернетом скажут спасибо. Особенно в роуминге. Да и обрезаться она должна непонятным образом при повороте экрана.