Размеры и позиционирование изображений на веб-страницах

Вспомним, что для добавления файлов изображений на веб-страницу используется одиночный тег <img> с атрибутами:

<img scr="адрес" alt="описание" width="ширина" height="высота">

Атрибуты ширины и высоты можно опустить, если размер задается с помощью одноименных свойств CSS.

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

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

<img src="linuxhistory.png" 
     alt="История Linux" 
     width="100%" height="auto">

Значение auto для height заставляет высоту изображения масштабироваться пропорционально ширине.

То же самое через css-правило:

img {
  width: 100%;
  height: auto;
}
… 
<img src="linuxhistory.png" alt="История Linux">

Или встроенный в элемент стиль:

<img src="linuxhistory.png" alt="История Linux"
     style="width:100%;height:auto">

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

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

Наиболее простым способом решения проблемы является использование css-свойства max-width со значением в процентах и с одновременным указанием размера изображения в пикселях в атрибутах элемента img.

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

Ранее (см. урок 3), когда речь шла о блочных и строчных элементах, то для выравнивая отдельно стоящего изображения по центру приводился пример помещения его в блок div или figure. Однако мы можем сделать само изображение блочным элементом с помощью объявления display: block. После этого центрировать его с помощью margin: auto.

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
… 
<img src="gnu.png" alt="Логотип GNU"
     width="491" height="480">

Бывает, что маленькие картинки предпочитают обтекать текстом слева или справа. Для этого используют свойство float со значением left или right. В случае float: left элемент будет "уплывать" налево. Другие элементы будут оказываться справа от него.

Здесь может потребоваться решать две проблемы:

1. Бывает необходимо, чтобы только конкретный абзац обтекал изображение.
2. На узких экранах обтекание должно смениться на расположение картинки и текста друг под другом. Иначе получается слишком мало места для текста сбоку от изображения, и верстка выглядит плохо.

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

<p style="clear:left;">Самым известным …</p>

Объявление clear: left заставляет элемент перестать обтекать объекты, расположенные с левой стороны. Вариант clear: both – с обоих сторон. В нашем примере значение both дало бы тот же результат.

Чтобы убрать обтекание изображений на малых экранах, потребуется использовать @media-запрос, в котором значения свойств будут меняться. Однако если мы до этого оформляли элемент через атрибут style тега, то такой inline-стиль (строчный) имеет приоритет над внешней или внутренней таблицей стилей.

Поэтому в нашем случае понадобится использовать команду !impotant:

@media (max-width: 599px) {
  img {
    float: none!important;
    padding: 0!important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
}

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

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