Представьте вполне себе привычную, довольно семантичную вёрстку для картинок с подписями.
<figure>
<img src="image.jpg" alt="доступное описание">
<figcaption>Длинный-длинный текст, который по ширине значительно превышает ширину самой картинки</figcaption>
</figure>
Крис Койер задаётся вопросом, как сделать так, чтобы:
1. Картинка могла быть любой ширины, но не превышала размер контейнера.
2. Подпись в
figcaption подстраивалась по размеру к ширине картинки.3. Всей этой конструкции можно было добавить красивую обводку.
Простая на первый взгляд задача на самом деле имеет свои заморочки. В статье есть несколько решений.
https://frontendmasters.com/blog/the-figcaption-problem/
