Отобразить заголовок изображения внизу изображения

Question

Я пытаюсь отобразить заголовок изображения внизу изображения.

Это то, что у меня есть в настоящее время.Надпись должна быть внизу изображения и соответствовать его ширине.Причина, по которой он этого не делает, заключается в том, что <figure>, который содержит изображение, не изменяет размеры, чтобы соответствовать изображению.

<figure class="fig">
    <img src="http://such.url" class="fig__media"/>

    <figcaption class="image-caption-text">Some caption</figcaption>
</figure>

Я провел некоторый поиск и обнаружил, что обычно вам нужно добавить display: inline-block, как предложено здесь .Это не имеет никакого эффекта здесь.Я подозреваю, что это потому, что само изображение имеет CSS с position: absolute.Если я удаляю этот бит, макет ломается.(Не мой CSS, и я не веб-разработчик.) Поэтому мне кажется, что мне нужен способ получить <figure> для изменения размера, даже если изображение использует абсолютную позицию.Или другой способ правильно разместить подпись.

Answer 1

я бы предложил сделать это так position: absolute; для figcaption, а не img, что figure может принять ширину img

figure {
  border: 1px solid;
  display: inline-block;
  margin: 0;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 1em;
  left: 0;
  background-color: yellow;
  width: 100%;
}

<figure class="fig">
    <img src="http://placehold.it/500x200" class="fig__media"/>

    <figcaption class="image-caption-text">Some caption</figcaption>
</figure>