DIY Главная Медиа Logo

Конечная сайт для проектирования и создания вашей установке домашнего кинотеатра и Привет-Fi.

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

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

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

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

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

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

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

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

ВысоташиринаИзображение сделатьКомментарии
4:316:1016:9
2160288038402400× 38404к UHD
1600
1536
1440
-
2048
1920
2560
-
-
-
-
2560
1600× 2560
1200
1080
1050
1600
1440
1400
1920
-
1680
-
1920
-
1200× 1920Full HD 1080p
960
900
1280
1200
1536
1440
-
1600
1000× 1600
800
768
720
-
1024
960
1280
-
-
-
-
1280
800× 1280720р
600
576
800
768
960
-
-
1024
640× 1024
480640768480× 768

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

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

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

оставьте ответ