Изображение Flexbox с подписью в стиле колонки

Question

Сейчас я делаю карусель изображений. (Карусель основана на библиотеке, не входящей в сферу этого вопроса, поскольку я также не могу заставить ее работать за пределами карусели).

Я пытаюсь сделать следующее: у меня есть div и внутри что у меня есть изображение и подпись (просто строка текста или 2). Я хочу, чтобы изображение над заголовком было как можно большего размера (занимая все пространство, которое заголовок не занимает). Но изображение продолжает превышать высоту родительского div. Он никогда не содержится в родительском div. И если это так, он теряет соотношение (сохраняет ту же ширину, но содержит высоту, что, очевидно, дает странный результат).

Я много пробовал с flexbox, как это:

<div class="container"> // <---- this wrapper need a specific height depending on screen size.
    <img src="/images/thing.png" class="img" alt="pict">
    <div class="caption">
        <span>Text</span>
    </div>
</div>

и CSS:

.container {
    height: 800px;
}

.img {
    width: auto;
    height: 100%; // this fills the container with the image but i wont see the caption anymore.

    // also tried giving this one flex (NOT in combination with above. Just showing all i tried)
    flex: 1 1 0%; 
}

.caption {
    flex: 1 1 0%; // Or 1 1 auto; no difference
}

Как мне go об этом? Может быть, это только я борюсь с flexbox. Возможно я подхожу к этому неправильно. Любая помощь / советы приветствуются!

Answer 1

/* Horizontal flex: rows
   =====================
*/

.row {
  display: flex;
}

.item {
  flex: 1 1 30%;
  padding-left: 1.5rem;
}

.item:first-child {
  padding-left: 0;
}  

/* Vertical flex: items
   ===================
*/

.item {
  display: flex;
  flex-direction: column;
}

.item-heading {
  flex: 1;
}

/* Third flex: item heading
   ========================
*/

.item-heading {
  display: flex;
  justify-content: center;
  flex-direction: column;
}


/* Not so important CSS - base styles: 
   ===================================
*/

body {
  margin: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

h2, 
p {
  margin: 0;
  padding: 0;
}

.row {
  margin-bottom: 1.5rem;
}

.item-heading {
  padding: 1rem;
  font-size: 1rem;
  background: yellow;
  text-align: center;
}

.meta {
  color: #666;
  margin-bottom: 3rem;
}

.meta p {
  margin-bottom: .5rem;
}

<div class="meta">  
  <h1>
  Image gallery with a vertically centered captions
  </h1>
  <p>
    Yellow headings we want both vertical and horizontal centered.  
  </p>
  <p>
    There are three nested flexbox containers – row, item and item heading.
  </p>
</div>


<div class="row">

  <div class="item">
    <p class="item-image">
      <img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
    </p>
    <h2 class="item-heading">
      Lorem ipsum dolor sit amet
    </h2>
  </div>

  <div class="item">
    <p class="item-image">
      <img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
    </p>
    <h2 class="item-heading">
      Proin pede metus, vulputate nec, fermentum fringilla, vehicula vitae, justo
    </h2>
  </div>

  <div class="item">
    <p class="item-image">
      <img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
    </p>
    <h2 class="item-heading">
      Consectetuer adipiscing elit
    </h2>
  </div>
  
</div>  
  
<div class="row">  
  
  <div class="item">
    <p class="item-image">
      <img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
    </p>
    <h2 class="item-heading">
      Nunc dapibus tortor vel mi dapibus sollicitudin
    </h2>
  </div>

  <div class="item">
    <p class="item-image">
      <img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
    </p>
    <h2 class="item-heading">
      Mauris elementum mauris vitae tortor
    </h2>
  </div>

  <div class="item">
    <p class="item-image">
      <img src="https://parosrentcar.com/wp-content/uploads/2018/05/kawasaki-250-600-200.jpg" alt="Image">
    </p>
    <h2 class="item-heading">
      Aliquam ornare wisi eu metus
    </h2>
  </div>  
  
</div>

codepen: Ссылка

Я надеюсь, что это поможет вам