Flexbox image with caption in column style - html

Question

I am currently making a carousel of images. (Carousel is based on a library, not in the scope of this question as i also cannot get it to work outside the carousel).
What i am trying to do is the following: I have a div and within that div i have an image and a caption (just a line of text or 2). I want the image above the caption and as large as possible (taking up all the space the caption does not take up). But the image keeps exceeding the parent div's height. It is never contained in the parent div. And if it is, it loses its ratio (keeps the same width but height is contained which gives a weird result obviously).
I tried a lot with flexbox like this:
<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>
and the 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
}
How do i go about this? Maybe it is just me struggling with flexbox. Maybe i am approaching this wrongly. Any help/tips is appreciated!

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 : Link
i hope this help you