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

Я недавно обновляли свои веб-сайты и веб-сервер и добавить новый сайт (LoveCrete.org). Я хотел бы иметь фоновое изображение на LoveCrete и понял, что, конечно, 1 размер не подходит для всех экранов. Вот краткое изложение того, что я думал и что я сделал, чтобы удовлетворить многочисленные размеры и ориентации экрана..

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

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

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

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

Это означает, что в большинстве случаев изображение не будет идеально соответствовать размеру экрана, но все экраны получат что-то очень близкое, и ни один экран не окажется слишком маленьким. Это также означает, что исходное изображение может быть обрезано для 16:10 один раз, а затем несколько размеров легко создаются

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

Как видите, я сгруппировал довольно много резолюций и затем сделаю 1 изображение, которое охватит все высоты до самой большой высоты в этой группе. Я позабочусь о том, чтобы изображение также было достаточно широким для максимальной ширины, с которой такая высота могла бы сочетаться на обычном экране.. Я не учел необычные конфигурации, такие как 21:9 мониторы или несколько экранов — где-то должен быть предел!

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

В 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); }}
}