Этот вопрос закрыт для ответов, так как повторяет вопрос Картинка во всю ширину экрана без пробелов?
@dsvsd

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

Необходимо показывать изображение пользователю на весь экран без потери качества для разных разрешений/соотношений сторон.
  • Вопрос задан
  • 1133 просмотра
Ответы на вопрос 3
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
background-size: cover;
Ответ написан
dom1n1k
@dom1n1k
В чем конкретно проблема?
Проще всего взять большую качественную картинку и сказать ей background-size: cover. Этот вариант простой и рабочий, но заставляет владельцев мобильников качать лишний трафик.
Чтобы этого избежать, делается несколько картинок разного размера и разруливаются при помощи media-выражений.
Дополнительно имеет смысл сделать ещё плейсхолдер в виде очень мелкой картинки, заинлайненной прямо в CSS как base64 - чтобы занимать место в те секунды, пока грузится основная картинка.
Ответ написан
HelpSophie
@HelpSophie
1. background-size: cover;
2. object-fit для img
3. разные картинки для разных экранов, разрешений, плотности пикселей и ориентации: тег picture
4. разные картинки в media

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

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы