Различные фоновые изображения для разных разрешений

Question

Я использую полноэкранное фоновое изображение слайд-шоу с 29 изображениями. Изображения показывают идеальное разрешение (1366 x 769) пикселей, но когда я использую другое разрешение, которое ниже этого, большая часть части изображения не отображается. И когда разрешение слишком велико, цвет фона (белый) появляется справа и внизу.

Как я понял, чтобы проверить разрешение с JavaScript экрана IS-

<script type="text/javascript"> 
if ((screen.width=1400) && (screen.height<=900)) { 

} 
if ((screen.width=1366) && (screen.height<=768)) { 

} 
else { 

} 
</script> 

Теперь, как я должен использовать изображения ниже в коде выше?

<img src="1400/images/background/bg-2.jpg"> 
<img src="1400/images/background/bg-3.jpg"/> 
... 
<img src="1400/images/background/bg-29.jpg"/> 

и

<img src="1366/images/background/bg-2.jpg"> 
<img src="1366/images/background/bg-3.jpg"/> 
... 
<img src="1366/images/background/bg-29.jpg"/> 

Я не могу использовать CSS для этого, как изображения отображаются с HTML кодом.

Answer 1

Установите фон с CSS и чем опробовать медиа-запросы

http://wiki.selfhtml.org/wiki/CSS/Media_Queries

Что-то вроде:

@media (width: 800px) { 
    body { 
     background-image: url('image1.jpg'); 
    } 
} 

@media (width: 1200px) { 
    body { 
     background-image: url('image2.jpg'); 
    } 
} 

или сделать это с различными файлами

Min-width and Max-width css media queries

или написать собственный сценарий до конца. Возможно, с помощью jQuery и добавления css-файлов, если они вам понадобятся.

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     var $background = jQuery('<img class="background" src="fallback.jpg" alt="" />'); 

     if (jQuery(window).width() == 1400 && jQuery(window).height() <= 900) { 
      // jQuery('head').prepend('<link href="styles1.css" ... />'); 
      // or 
      $background.attr('src', 'image2.jpg'); 
     } 

     [...] 

     $background.appendTo('body'); 
    });  
</script> 

<style type="text/css"> 
    img.background { 
     /* style your background e.g. */ 
     position: absolute; 
     display: block; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     border: 0 none; 
    } 
</style> 

Answer 2

Чтобы избежать загрузки неправильных изображений, я бы добавил эти теги изображений с помощью Javascript с самого начала. Затем вы просто добавляете их с соответствующим путем, который вы определяете в первом фрагменте Javascript.

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

Кроме того, вы, вероятно, не должны использовать свойство .width, но availWidth. Это предотвратит одну проблему, когда пользователи не будут иметь окна браузера, а также могут открывать боковую панель (закладки и т. Д.), Которые будут есть в области отображения.

Если изображения уже есть на странице, и вы не можете изменить их, вы можете изменить их свойства SRC с помощью Javascript. Это означало бы, что два набора изображений были загружены максимум, хотя. Поскольку в этом примере вы не указали больше HTML, я не могу сказать, какой именно код будет выбирать именно эти. Все ли они существуют в div, который имеет определенный идентификатор, или все они имеют атрибут класса, который вы не ввели в свой пример?

Answer 3

Перейти к плагину jQuery. Supersized является одним из моих любимых.

http://buildinternet.com/project/supersized/