Header Image: Размер и отзывчивость

Question

Я пытаюсь создать веб-сайт и хочу добавить изображение заголовка, похожее на эти примеры: 1.) http://bit.ly/1PP0Shr 2.) http://bit.ly/1PP1h3n

Моего текущий заголовок изображением является фотографией, которая является 1580 x 1050 пикселей.

Мои вопросы:

1.) Какова приемлемая ширина и длина для размера заголовка изображения для просмотра на настольных компьютерах?

Я знаю, что, возможно, не один «размер по умолчанию», чтобы управлять ими всеми, но я хотел бы руководство по некоторым измерениям, которые я могу использовать для продвижения вперед и даже изменения размеров моих текущих изображений заголовков в Photoshop.

2.) Какой код CSS следует использовать, чтобы сделать изображение заголовка чувствительным на всех экранах?

Есть ли какие-либо конкретные свойства фона для применения в моей таблице стилей CSS? Я даже кратко прочитал о медиа-запросах, но не знаю, как их использовать на данный момент.

спасибо.

Answer 1

Вы правы, для всех устройств не существует значения по умолчанию. Если вам нужен приемлемый размер для вашего заголовка, я бы предпочел разрешение «Full HD» (1920px). Это самый общий размер экрана.

Существует несколько способов сделать изображение заголовка неповторимым.

1. Просто сделайте ваш заголовок ширина изображения 100% (лучше с классом CSS)
2. Сделать 100% ширины экрана DIV и поместить изображение заголовка в фоновом режиме и установить фон-размер: крышка.

EDIT: При использовании 1 изображения для всех размеров экрана, убедитесь, что даже небольшие устройства должны загрузить отверстие полноэкранного изображения (и масштабировать их по ширине документа). Лучший способ - несколько изображений и мультимедийный запрос

EDIT 2: @Turtle был прав. 1366 - самый общий размер экрана. http://www.w3schools.com/browsers/browsers_display.asp

Мой плохо ^^

Answer 2

Размер равно качеству в данном случае.

Вы могли бы дать свойство изображения CSS, такие как background-size: cover и width:100%, который будет охватывать/растянуть изображение, чтобы заполнить div он contaiend. Обратите внимание, что на больших просмотра портов изображение с вашим разрешением (1580x1050px) будут выглядеть странности поскольку ширина div (если 100% и с использованием всего окна просмотра) больше изображения.

@ 0x4Dark дает вам ложную информацию, причем 1920px является самым распространенным размером экрана, так как на самом деле это 1366x768.

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

Answer 3

Вопрос один кажется немного тривиальным, как вы заявили, нет ни одного «default» размер, это должно быть определено на индивидуальной основе. Если вы считаете, что он выглядит хорошо и не занимает слишком много места в браузере пользователя, используйте его. Если он выглядит слишком большим, сделайте его меньше, это все просто предпочтение дизайнеров.

Что касается вопроса два, однако: Существует несколько различных способов, которыми вы можете сделать изображение заголовка на всех экранах. Когда вы попросите решение для CSS, я начну с этого в первую очередь.

Один из основных способов, с помощью которого вы хорошо подходите, это использование простых медиа-запросов для изменения ширины и высоты изображения в зависимости от разрешения экрана. Может быть полезно установить высоту как процентное значение, а затем установить максимальное значение высоты в пикселях, чтобы остановить слишком большой заголовок. Read more on media queries here.

Пример

@media only screen and (max-device-width: 667px){ 
img { height: 50%; 
     max-height: 200px; 
    } 
} 

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

CSS
(Этот метод не работает в FireFox 40.0.2 и Internet Explorer 11.0.9600.17905)

@media only screen and (max-device-width: 667px){ 
    .imgClass{ 
     content:url("img/mobileimg.png"); 
    } 
} 
@media only screen and (min-device-width: 667px){ 
    .imgClass{ 
     content:url("img/desktopimg.png"); 
    } 
} 

JQuery
Использование `$ (окна) .width (); чтобы найти ширину окна. Вы можете создать столько разделов инструкции if, сколько потребуется, для разных разрешений.

$(function() { 
    if($(window).width() <= 667) { 
    $("img").each(function() { 
     $(this).attr("src", $(this).attr("src").replace("img/desktopimg.png", "img/mobileimg.png")); 
    }); 
    } 
});