Stack Image and Text in Div allowing text to govern height in Div

Question

I have a fixed height div. Inside that div I want to stack an image on top of text. I want the text area to govern how much space the image has. I'd like to do this with CSS only. I'm sure I could devise a system with JS, but I'm trying to avoid it for this instance.

More details:

If the text requires three lines, then the image above should be max-width: 100% and max-height to not exceed what is left over from the text's space taken. So if the parent div is 750px and the text requires 100px of height, the image should at most be allowed to be 650px tall.

I've been messing around with flex-box and such, trying to use flex-column and things and I cannot keep the image limited in size. I had 2 div areas stacked and the top was shrinking with the text, but then when I dropped the image in, it broke.

Is this even achievable with CSS alone.

This is what I have and an example of it not working: https://jsfiddle.net/aoqerm06/

<div style="height: 400px;" class="d-flex flex-column">
    <div class="bg-primary h-100" >
        IMAGE GOES HERE
    </div>
    <div class="flex-grow-1">
        LOTS OF TEXT HERE
    </div>
</div>

Wow, can you explain. I don't understand how that works. Feels hacky. It had the desired effect, but why. — Leeish, Jan 21 '21 at 23:38
Thanks... I had no idea what the problem was nor how to search it but this makes perfect sense. — Leeish, Jan 22 '21 at 16:55

score 0 · Answer 1 · answered Jan 21 '21 at 18:22

I think I've got what you're looking for. By making it into a div with a bg-image you can manipulate it with more ease:

.ex-container {
  display: flex;
}
.container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  height: 450px;
  width: 300px;
  background-color: #ddd;
  margin-right: 15px;
}

.text {
  
}

.img {
  display: inline-block;
  height: 100%;
  width: 100%;
  background-image: url('https://source.unsplash.com/random');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="ex-container">
  <div class="container">
    <div class="text">
      <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here. </p>
    </div>
    <div class="img"></div>
  </div>
  
  <div class="container">
    <div class="img"></div>
    <div class="text">
      <p>Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.  Lots of text here. Lots of text here.Lots of text here. Lots of text here. Lots of text here. Lots of text here. Lots of text here.</p>
    </div>
    
  </div>
</div>

I thought about that, and maybe I'll have to go further. I'm using cloudinary for images and the js plugin that gets the dom sizes and requests an appropriate sized image based on that. I'll have to see if that somehow works with BG image. — Leeish, Jan 21 '21 at 19:00
Hm, not sure what the bigger picture here is. Just hope it helped :D — mah111, Jan 21 '21 at 19:02
It does. But my image asset management tool Cloudinary has images of say 3000x2000px wide. How do I know which image size to serve to my background image. I don't want to deliver the 3000px wide one it would be overly large. The tool allows me with the image URL to serve an specific image size. Their JS plugin gages the DOM width of the tag and gets the appropriate URL automatically to serve the optimal image size for the user. This isn't possible with the plugin, background image. I'm going to see about adapting it, but for now, it's not perfect for my situation. — Leeish, Jan 21 '21 at 19:09

Stack Image and Text in Div allowing text to govern height in Div

1 Answers1