Skip to content

Автоматическая нумерация изображений на CSS

При написании статей на блог для наглядности вы добавляете изображения, диаграммы, фотографии, или даже видео и фрагменты кода. Будет неплохо их пронумеровать, чтобы читателю было легче следить за вашей мыслью. Этим мы и займемся в нашем уроке: мы объединим использование элемента <figure> с CSS-счетчиками, чтобы нумерация происходила автоматически.

Основы

Если элементу <figure> мы уделили внимание в серии уроков «Неделя HTML5» (перейти к уроку про элемент <figure>), то тему CSS-счетчиков я подробно еще не раскрывал (но мы их использовали в «хлебных кошках»).

CSS-счетчики — это одно из самых редких свойств CSS. Но они дают возможность нумеровать что-либо не прибегая к HTML или JavaScript.

Для работы со счетчиками нам понадобятся:

  • Свойство counter-reset используется для инициализации и сброса одного или нескольких счетчиков
  • Свойство counter-increment используется для увеличения одного или нескольких счетчиков
  • Значение counter() является допустимым значением для псевдо-элементов :before и :after, принимая имя счетчика в качестве параметра для того, чтобы вернуть его значение.

Пример реализации счетчика:

/* 1. Инициализация счетчика */
body {
counter-reset: myAwesomeCounter;
}

/* 2. Увеличиваем значение счетчика, если найдется следующий элемент */
.myAwesomeElement {
counter-increment: myAwesomeCounter;
}

/* 3. Выводим значение счетчика перед элементом */
.myAwesomeElement:before {
content: counter(myAwesomeCounter);
}
Подробней о данном свойстве можете почитать на MDN.

Вернемся к нашей теме? Мы хотим пронумеровать наши изображения, чтобы перед ними был префикс «Рис. 1 — …», «Рис. 2 — …» и так далее. Вот пример CSS, который это сделает:

.article {
counter-reset: figures;
}

.figure {
counter-increment: figures;
}

.figure figcaption:before {
content: 'Рис. ' counter(figures) ' - ';
}

Практика

То, о чем мы сейчас говорили — это была теория. Теперь перейдем к практике.

Простые стили

Было бы здорово стилизовать и выровнять изображения, просто добавив определенный класс. Начнем с простых стилей: добавим рамку и отступы:

.figure {
padding: 0.9em;
border: 3px solid #f5bca8;
background: #fff;
margin: 0 auto 1em;
}

Для того, чтобы центрировать изображения по горизонтали и не допустить их выхода из своего контейнера (элемент <figure>), нам нужно добавить некоторые правила к ним:

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

Теперь описание картинки <figcaption>:

.figure figcaption {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.8em;
padding: .5em;
text-align: center;
color: #fff;
background: #f5bca8;
}

Нумерация

Теперь мы уже знаем как это делается, поэтому возьмем код из примера выше:

.article {
counter-reset: figures;
}

.figure {
counter-increment: figures;
}

.figure figcaption:before {
content: 'Рис. ' counter(figures) ' - ';
}

Если вы хотите нумеровать не все изображения, тогда можно сделать определенный класс элементу <figure>, например .numbered-figures. Тогда код нумерации примет следующий вид:

.numbered-figures { counter-reset: figures; }
.numbered-figures .figure figcaption { counter-increment: figures; }
.numbered-figures .figure figcaption:before { content: 'Рис. ' counter(figures) ' - '; }

Выравнивание

Чтобы сделать выравнивание наших изображений по левому и правому краям, создадим еще 2 класса:

.figure-left {
float: left;
margin: 0 1em .5em 0;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}

.figure-right {
float: right;
margin: 0 0 .5em 1em;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}

Последнее, но не менее важное. Мы должны изменить или удалить значение максимальной ширины для изображений, выровненных по левому или правому краю. Если вы хотите, чтобы фотографии имели свой исходный размер, тогда вам нужно установить значение none для свойства max-width, или вы можете установить определенную максимальную ширину:

.figure-right img, .figure-left img {
max-width: 300px; /* Adjust to suit your needs */
}

Адаптив

Чтобы на экранах смартфонов не было проблем с изображением выровненных изображений, уберем выравнивание и растянем изображение на всю доступную ширину:

@media (max-width: 767px) {
.figure-left, .figure-right {
float: none;
margin: 0 0 1em 0;
width: 100%;
}

.figure img {
max-width: 100%;
}
}

Использование

Теперь используем наши стили в HTML-коде.

<!-- Изображение по центру -->
<figure class='figure'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

<!-- Изображение по левому краю -->
<figure class='figure figure-left'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

<!-- Изображение по правому краю -->
<figure class='figure figure-right'>
<img src="path/to/your/image.jpg" alt="" />
<figcaption>Here is the legend for your image<figcaption>
</figure>

Источник: Codrops