Css-стили изображений сайта

Исходя из предыдущих уроков, мы можем прийти к выводу о двух вариантах описания css-стиля для крупных изображений, размещаемых на html-страницах сайта.

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

img {
  max-width: 100%;
  height: auto;
}
figure {
  text-align: center;
}

Второй вариант - сделать блочным сам тег img. В этом случае нет необходимости вкладывать картинки в родительский контейнер.

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

Несмотря на простоту второго способа, первый может оказаться более удобным, если на сайте будут не только выравниваемые по центру картинки, а также вставляемые в абзацы и обтекаемые слева или справа. Кроме того, через figure настраивать отступы под разные экраны может быть легче. В примере ниже на экранах от 501px у центрированных картинок будут появляться отступы слева и справа, а на малых экранах они будут "вытягиваться" на всю ширину:

figure {margin: 1em 0; text-align: center;}
@media(min-width: 501px) {
  figure {
    margin-left: 13px;
    margin-right: 17px;
  }
}

Отступы зависят от макета. В примере выше предполагается, что абзацы имеют отступы 13 и 17 пикселей. Поэтому на широких экранах, чтобы изображения смотрелись аккуратно, мы добавляем такие же. Если отступы статьи устанавливаются за счет внешнего контейнера (например, main или article), то css-правило может выглядеть примерно так:

figure {
  text-align: center;
  margin: 1em 0;
}
@media(max-width: 500px) {
  figure {
    margin-left: -15px;
    margin-right: -15px;
  }
}

Когда сам тег img остается строчным элементом, проще потом добавлять отдельные классы для нецентрированных картинок. При этом для центрированных (которые, скорее всего, будут преобладать) не создавать и не указывать класс. В добавок, если часть изображений предполагает наличие figcaption (подписи под картинкой), вам все-равно придется использовать figure.

Если нецентрированные картинки на сайте большая редкость, то в случае необходимости проще прописывать для них inline-стили (через атрибут style тега img) или создавать дополнительные css-правила на уровне страницы (контейнер style). Для особых изображений (например, логотипа сайта) можно создать идентификатор (id), описав его свойства в общей таблице стилей.

a#logo img {
    margin: 5px;
    vertical-align: -18px;
    width: 55px;
    height: 45px;
}

<a id="logo" href="/" title="На главную">
  <img src="/static/images/logo.png"
       alt="Логотип сайта &quot;Название сайта&quot;"
       width="55" height="45">
  <span>Название сайта</span>
</a>

В специфичном css-правиле надо прописывать свойства ширины и высоты, чтобы переопределить действие общего правила img.