CODEWITHSUNDEEP
htmlcssflexboxaspect-ratio
woolm110
woolm110

Reputation: 1204

Flex: Image top, text bottom. Expand remaining height with aspect ratio image.

I'm trying to create a simple design, image on top, text underneath. I'm using flexbox.

I want to keep the images the same ratio so I'm using the padding top aspect ratio hack to do so, that works well.

What I'm struggling with is getting the text box beneath the image to take up the rest of the remaining space in the container. I was hoping that flexbox would make this easy but I think using it in conjunction with the aspect ratio hack is causing issues.

Here's a fiddle of the basic layout https://codepen.io/anon/pen/NEqdyN. Can anyone help me make each of the red boxes expand to fill the remaining height? I also need to add a border radius the bottom of each corner so I can't use the overflow hidden method.

Thanks in advance!

Code below

<div class="container">
  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}

.container {
  display: flex;
}

.card {
  width: 30%;
  margin: 0 1%
}

.image-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.text {
  background: red;
  padding: 20px
}

Upvotes: 0

Views: 572

Answers (1)

Quentin
Quentin

Reputation: 3289

It should work by defining a flex container on each card and using flex: 1 0 auto on text blocks.

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

.text {
  flex: 1 0 auto;
}

Demo

body {
  margin: 0;
}

.container {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 0 1%;
}

.image-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.text {
  background: red;
  padding: 20px;
  flex: 1 0 auto;
}
<div class="container">
  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Upvotes: 1

Related Questions