Размер поперечной оси для вертикального flexbox после сжатия изображения

Question

Я хочу создать макет с некоторым текстом (или, возможно, другим материалом) под изображением и комбинацией текста и изображения с фиксированной высотой. Код ниже делает это, но контейнер flexbox не обновляет свою ширину после того, как изображение было уменьшено (остается на уровне 600 пикселей). Как сделать так, чтобы контейнер был настолько же широким, как изображение?

.container {
  background-color: green;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
}

<div class='container'>

  <img src='http://via.placeholder.com/600'>
  <span>Some text</span>

</div>

Я ищу что-то подобное, но без указания высоты текста или высоты изображения:

.container {
  background-color: green;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
}

span {
  height: 20px;
}

img {  
  height: 280px;
}

<div class='container'>

  <img src='http://via.placeholder.com/600'>
  <span>Some text</span>

</div>

Редактировать: Если возможно, любое потенциальное решение должно также включать способ добавить ссылку на изображение.

Answer 1

Если это изображение, оно автоматически установит высоту, но вы должны указать высоту. Вы можете поместить отступы сверху и снизу, если вы действительно не хотите использовать высоту.