0Адаптивные фоновые изображения для веб-сайтов

Я недавно обновляли свои веб-сайты и веб-сервер и добавить новый сайт (LoveCrete.org). Я хотел бы иметь фоновое изображение на LoveCrete и понял, что, конечно, 1 размер не подходит для всех экранов. Here is a sum­mary of what my think­ing was and what I did to cater for the numer­ous screen sizes and orientations.

Какая ориентация

Я начал с того, что составил себе столик со всеми распространенными резолюциями ПК и таблетки (в горизонтальной ориентации). Я решил сосредоточиться на этом, потому что большинство изображений доступны в альбомной ориентации, так что это разумное место для начала.

Я решил, что я буду размещать изображения по центру на странице, и в некоторых случаях края будут потеряны за краем экрана.. Когда телефон используется в портретной ориентации, он будет загружать изображение в зависимости от высоты (не ширина) и потеряет много как от края изображения. Выполнение этого любым другим способом означало бы необходимость обрезки изображений до совершенно другой формы или использование «мозаичного» изображения ландшафта на высоком экране., который не является желательным.

Соотношения максимального размера изображения в каждой группе были все вокруг 1.6 с несколько выше. Чтобы было проще, я решил использовать соотношение 16:10 для всех изображений и пришли с размерами, чтобы сделать соответственно.

Это означает, что в большинстве случаев изображение не будет идеально соответствовать размеру экрана, но все экраны получат что-то очень близкое, и ни один экран не окажется слишком маленьким. Это также означает, что исходное изображение может быть обрезано для 16:10 once and then mul­tiple sizes eas­ily created

группы разрешения Общие ландшафтные

Как видите, я сгруппировал довольно много резолюций и затем сделаю 1 изображение, которое охватит все высоты до самой большой высоты в этой группе. Я позабочусь о том, чтобы изображение также было достаточно широким для максимальной ширины, с которой такая высота могла бы сочетаться на обычном экране.. Я не учел необычные конфигурации, такие как 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it somewhere!

Так как CSS использует размер окна просмотра или браузера, а не размер экрана. Для горизонтальных экранов необходимо использовать ширину, а не высоту - так как в большинстве систем верх и низ теряют место для заголовков и т. д., в то время как ширина обычно максимизируется. Однако, для портретных дисплеев лучше использовать свойство высоты. Это может быть сделано как CSS can identi­fy the screen orientation

В CSS используется, то выглядит следующим образом

тело{фон-повторить: не повторять; фон-вложение: исправлено; фон положение: центр центр; фон-размер: покрытие;}

@СМИ (Максимальная ширина: 768ПВ) {тело { фоновая картинка: URL(bg480.jpg); }}
@СМИ (мин-ширина:769ПВ) и (Максимальная ширина: 1024ПВ) {тело { фоновая картинка: URL(bg640.jpg); }}
@СМИ (мин-ширина:1025ПВ) и (Максимальная ширина: 1280ПВ) {тело { фоновая картинка: URL(bg800.jpg); }}
@СМИ (мин-ширина:1281ПВ) и (Максимальная ширина: 1600ПВ) {тело { фоновая картинка: URL(bg1000.jpg); }}
@СМИ (мин-ширина:1601ПВ) и (Максимальная ширина: 1920ПВ) {тело { фоновая картинка: URL(bg1200.jpg); }}
@СМИ (мин-ширина:1921ПВ) и (Максимальная ширина: 2560ПВ) {тело { фоновая картинка: URL(bg1600.jpg); }}
@СМИ (мин-ширина:2561ПВ) {тело { фоновая картинка: URL(../Изображения / bg2400.jpg); }}

@СМИ (ориентация: портрет){
@СМИ (максимальная высота: 480ПВ) {тело { фоновая картинка: URL(bg480.jpg); }}
@СМИ (мин-высота:481ПВ) и (максимальная высота: 640ПВ) {тело { фоновая картинка: URL(bg640.jpg); }}
@СМИ (мин-высота:641ПВ) и (максимальная высота: 800ПВ) {тело { фоновая картинка: URL(bg800.jpg); }}
@СМИ (мин-высота:801ПВ) и (максимальная высота: 1000ПВ) {тело { фоновая картинка: URL(bg1000.jpg); }}
@СМИ (мин-высота:1001ПВ) и (максимальная высота: 1200ПВ) {тело { фоновая картинка: URL(bg1200.jpg); }}
@СМИ (мин-высота:1201ПВ) и (максимальная высота: 1600ПВ) {тело { фоновая картинка: URL(bg1600.jpg); }}
@СМИ (мин-высота:1601ПВ) {тело { фоновая картинка: URL(bg2400.jpg); }}
}

Пожалуйста, отправьте нам свои мысли, комментируя ниже! Если вы хотите подписаться, используйте ссылку подписки в меню в правом верхнем углу.. Вы также можете поделиться этим со своими друзьями, используя приведенные ниже социальные ссылки.. Ура.