Отображение пользовательских фоновых изображений в зависимости от разрешения экрана

Для сайта мне нужно иметь возможность динамически отображать фоновые изображения в зависимости от разрешения экрана пользователя.

То есть, когда страница начинает загружаться, внутри <head> загружается небольшой javascript, который устанавливает фон страницы через css на что-то вроде http://example.com/backgrounds/beach_800x600, где 800 и 600 — это разрешение экрана, определенное через javascript.

Я создаю различные изображения с измененным размером для наиболее распространенных разрешений экрана, чтобы у большинства людей было точное совпадение их разрешения экрана с существующим изображением. Если нет точного соответствия, например, если у пользователя разрешение экрана AxB, для которого нет существующего изображения, то изображение будет создано и изменено на AxB на лету, и будет обслуживаться. С этого момента всем, у кого разрешение AxB, будет показываться это изображение.

У меня есть вопросы:

1) Это безопасный метод? То есть я не хочу создавать более 50 изображений нестандартного размера для нестандартных разрешений экрана. Смогу ли я остаться на этом стадионе с помощью этого метода? И есть ли какие-либо другие риски безопасности, о которых я должен знать при использовании этого метода?

2) Должен ли я дать ему погрешность, скажем, 50 или 100 пикселей, поэтому, если у кого-то разрешение 700x900, а у меня его нет, но у меня есть 600x800 или у меня есть 800x1000, тогда я буду использовать эти существующие изображения, а не создавать новые те? Если да, должен ли я установить поле в 100 пикселей или есть лучшее число?


person Ali    schedule 31.08.2012    source источник


Ответы (2)


Благодаря использованию медиа-запросов CSS3 и свойства background-size практически нет необходимости в JS, кроме как в целях совместимости с устаревшими браузерами.

Вот ссылка с подробной информацией о background-size. Это свойство позволяет масштабировать изображение различными способами, независимо от разрешения пользователей. Иногда это может быть не идеально.

Итак, у нас есть медиа-запросы CSS3. С их помощью вы можете ориентироваться на определенные разрешения (или выше и ниже определенных разрешений) и сообщать браузеру, какое изображение вы хотите отображать соответствующим образом (или даже как его отображать, с background-size или без него).

person Vin Burgh    schedule 31.08.2012
comment
Масштабирование изображения через размер фона приведет к тому, что оно будет выглядеть искаженным, да? Что касается медиа-запросов, проблема остается в том, что мне нужно изменить размер для наиболее распространенных разрешений, но если в них нет разрешения пользователя, то я бы хотел создать изображение с измененным размером для этого на лету. - person Ali; 31.08.2012
comment
background-size конечно может привести к искажению изображения. Однако давайте представим, что вы создали 3 фоновых изображения; один для 800x600, один для 1024x768 и один для любого разрешения больше 1024x768. Если бы вы установили background-size:cover для каждого соответствующего фонового изображения в зависимости от медиа-запроса, проблему можно было бы предотвратить. Ваши медиа-запросы должны иметь вид: max-width: 800px, max-width: 1024px и min-width: 1025px соответственно. - person Vin Burgh; 31.08.2012
comment
@ClickUpvote Это не гарантирует, что посетитель увидит весь фон, так как некоторая стилизация все равно будет иметь место, но я считаю, что это удачный компромисс, и к тому же выполнимый. - person Vin Burgh; 31.08.2012

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

Также это можно легко сделать с помощью селекторов мультимедиа CSS3, а не JavaScript (хотя это также можно сделать с помощью JavaScript).

См. здесь некоторую информацию о медиазапросах http://webdesignerwall.com/tutorials/css3-media-queries

person Brendan    schedule 31.08.2012
comment
Я не хочу загружать другое изображение каждый раз при изменении размера браузера, я мог бы выбрать окно в начале загрузки страницы, а затем выбрать другое. - person Ali; 31.08.2012