html - 带有列式标题的 Flexbox 图像

Question

我目前正在制作图像轮播。 (旋转木马基于库，不在这个问题的范围内，因为我也无法让它在旋转木马之外工作)。

我想做的是:我有一个 div，在那个 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
}

我该怎么做？也许只是我在 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>

代码笔:Link

希望对你有帮助