Верстка изображения с подписью
При верстке очередного проекта появилась такая задача — необходимо сверстать изображение в контентной части с подписью снизу. Причем подпись, независимо от количества символов, не должна выходить за пределы ширины изображения, выравнивание текста всегда от левого края изображения. Ширина самого изображения может быть любой, в мобильной версии подставляется другой вариант, также оно может быть по выравнено не только по левому краю, но и по центру. Рассмотрим, как это можно реализовать.
§ Разметка
Начнем с разметки. Не забываем про семантику.
<div class="article-media article-media_center">
<figure class="article-media__inner">
<picture class="article-media__img-wrap">
<source srcset="https://via.placeholder.com/300x225" media="(max-width: 767px)">
<img src="https://via.placeholder.com/600x450" alt="" class="article-media__img" />
</picture>
<figcaption class="article-media__caption">Какая-то очень умная длинная подпись, которая не выходит за пределы ширины изображения</figcaption>
</figure>
</div>
§ Стили
Прекрасно то, что это реализовывается без всякого js, одними стилями. Элемент .article-media__inner делаем строчно-блочным, чтобы выравнивать его по нужному краю с помощью родительского модификатора. Для подписи задаем принудительное центрирование слева — оно всегда будет таковым.
.article-media__inner {
display: inline-block;
}
.article-media__caption {
text-align: left;
}
И далее мы используем свойство max-width со значением fit-content, которое не даст тексту растягивать родителя, а будет подстраиваться под картинку.
.article-media__caption {
max-width: fit-content;
}