Howto use media query with image

Дата и время публикации: 2017-08-13 8:55:00

на страницах WEB с изменяемой геометрией экрана

1. Суть задачи

Потребность в решение такого рода задачи возникает, когда изменяется размер браузера и вместе с ним страницы WEB, либо на устройствах с изменяемой геометрией экрана, таких как смартфон или планшет, имеющие функцию "Поворота экран".

Пример такой коллизии приведен на рисунке 1.1

Рисунок 1.1

2. Решение

Как показано на рисунке 1.1, чтобы избежать выхода изображения за границы видимой части страницы WEB и сделать её более адаптивной к издевательствам такого рода со стороны пользователя, достаточно использовать медиа-запрос @media для изменения свойств класса со стилями для изображения (тег <img>) на странице WEB.

А все потому, что просто определить класс в файле каскадных таблиц стилей СSS не всегда достаточно и часто такое не прокатывает, особенно когда в динамике меняется геометрия окна браузера, а вместе с ним и самой странице WEB, как показано в листинге 2.1 и 2.2 .

Листинг 2.1 Фрагмент файла каскадных таблиц стилей СSS

  . . . 
   img.balanced {
      display:       block;
      width:         940px;
      overflow-x:    scroll;
   }
  . . .

Листинг 2.2 Фрагмент кода HTML с тегом <img> с классом "balanced"

<p>
 <img class="balanced" src="https://rjaan.narod.ru/docs/gnucs/pics/sllist_ill1.gif">
</p>

Поэтому добавляем класс ".p_img" и модифицируем "balanced" уже в упомянутом файле CSS, как показано в листинге 2.3 .

Листинг 2.3 Фрагмент файла каскадных таблиц стилей СSS

 . . . 
 img.balanced {
    display:       block;
    width:         940px;
    margin-left:   auto;
    margin-right:  auto;
 }

 .p_img{
    width:      100%;
 }
 . . .

и, соответственно, вносим необходимые изменения кода HTML, как показано в листинге 2.4 .

Листинг 2.2 Фрагмент кода HTML с тегом <img> с классами "balanced" и "p_img"

<p class="p_img">
 <img class="balanced" src="https://rjaan.narod.ru/docs/gnucs/pics/sllist_ill1.gif">
</p>

Но, самое главное, изменяем ширину изображения со 100 до 90 процентов и добавляем горизонтальную полосу прокрутки, как показано в листинге 2.4, т.е. сохраняем свойство адаптивности дизайна страницы WEB (Adaptive Web Design), когда видимая часть экрана (viewport) стала меньше 1000px.

Листинг 2.4 Фрагмент файла каскадных таблиц стилей СSS

 . . .      
@media only screen and (max-width: 1000px) {
    .p_img {
        overflow-x: scroll;
        width:      90%;
    }
}
 . . .

Примечание Для этого, применяется запись "@media screen and (max-width: 1000px)", которая говорит, что для окна с максимальной шириной (тип запроса max-width: 1000px) нужно применить стили "overflow-x" и "width", когда рабочая область экрана становится меньше 1000px. При этом, для указанной записи, в листинге 2.4 используется ключевое слово ‘only’, которое скрывает перечисленные выше свойства для браузеров, которые не поддерживают подобные типы(как в нашем случае с max-width) и сами медиа-запросы.

и как говорил один из персонажей отечественного фильма: ловкость рук и никакого мошенства. Из рисунка 2.1 видно, что в тех же размерах рабочей области экрана изображение не выходит за её рамки, но и не нарушает адаптивность дизайна страницы WEB. При этом, пользователь имеет возможность просмотра всей картинки, а не обрезанного фрагмента.

Рисунок 2.1

3. Библиография

1) W3C. Media Queries

2) CSS3 @media Rule

3) CSS Media Queries and Size of Images

4) Responsive Web Design - Images

5) Stackoverflow. What is the difference between “screen” and “only screen” in media queries?

6) Адаптивный веб-дизайн