CODEWITHSUNDEEP
htmlcssflexbox
zepperik
zepperik

Reputation: 87

Create a div with text and image scaled to fit remaining space?

I would like a div to contain text and also an image automatically scaled to fit the remaining space that the text did not occupy in the div. I've come to the conclusion that the most common way to scale an img element is through the max-height/max-width styles. But that value is relative to a parent element and by design I'm not going to know its space size.

So using the "background-image" style on an automatically scaled div seems to be the way to go. Also Flex-box seems to be the way to go.

HTML:

<div class="item">
    <div class="item-img" style="background-image:url('images/piano.jpg')"/>
    <div class="item-desc"> A Piano.  This text will break it if too long</div>
</div>

CSS:

.item {
display: flex;
flex-direction: column;
height: 100vh;
}
.item-img {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
flex: 1;
}
.item-desc {
flex: 1;
}

This works fine unless the description text gets too long. Then, for some reason, the image divider will not shrink to make room for the text. I see solutions about using "object-fit" but I assume there must be a flex-box solution. It seems the answer should be some combination of flex-shrink and flex-grow. I'll probably figure it out but this question has enough interesting things and major concepts that I thought it was worth posting, and I don't see them all-in-one anywhere on this site.

Upvotes: 0

Views: 2185

Answers (1)

Asons
Asons

Reputation: 87191

I would like a div to contain text and also an image automatically scaled to fit the remaining space that the text did not occupy in the div.

For that to happen it is the image div that needs to be flex: 1, so it grows and take the available space, and the text div should have the default, which is flex: 0 1 auto, which mean, don't grow (0), allow to shrink (1), sized by content (auto).

Stack snippet

body { margin: 0; }

.item {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.item-img {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 1;
}

.item-desc {
}
<div class="item">
  <div class="item-img" style="background-image:url(http://placehold.it/400)"></div>
  
  <div class="item-desc">
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
    An image. This text will break it if too long. 
  </div>
</div>

Upvotes: 3

Related Questions