2

How can the height of the image be relative to the height of the elements on the left?

I'm trying to create the following layout:

Flexbox with image height relative to text

What I tried

I'm trying to achieve this with flexbox. My html looks like this. I have display:flex on the container <div class="split">. That container houses two children containers: <div class="intro__primary"> and <div class="intro__secondary">. The first has an h1, p and a. The second the img.

I gave both children a width of 48%, and I want my image to occupy as much vertical space as possible, but not more than the height of <div class="intro__primary">.

HTML

<section class="intro">
  <div class="split">
     <div class="intro__primary">
        <h1></h1>
        <p></p>
        <a class="btn"></a>
     </div>
     <div class="intro__secondary">
        <img>
     </div>
</div>

CSS

.split {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.intro__primary {
        width: 48%;
        align-self: flex-start;
}

.intro__secondary {
    width: 48%;
    height: 100%;
    align-self: flex-end;
}

.intro__secondary > img {
    max-width: 100%;
    height: 100%;
}

The code above results in an image that has a way larger height than the container with the text on the left. I played a lot with all the properties but can't fix it. What am I overlooking?

Osocman
  • 81
  • 8
  • Frankly this is something you should be using a **background** image for and this solves the whole problem. Your image is *styling* not content and so does not need to be in the HTML at all. – Paulie_D Feb 09 '22 at 13:52

1 Answers1

1

.split {
  max-height: 100px;
  display: flex;
}
.intro__secondary {
  max-height: 100%;
}
.intro__secondary img {
  height: 100%;
  width: 100%;
  object-fit: cover; /* you can also use object-fit: contain; */
}
<section class="intro">
  <div class="split">
     <div class="intro__primary">
        <h1>Heading</h1>
        <p>paragraph</p>
        <a class="btn"></a>
     </div>
     <div class="intro__secondary">
        <img src="https://source.unsplash.com/random" alt="random-image">
     </div>
  </div>
</section>
Caleb
  • 105
  • 2
  • 10
  • I tried tihs, but it doesn't seem to be working in this situation. – Osocman Feb 09 '22 at 11:16
  • 1
    @Osocman Try removing the width property on the image. Or set ```width: auto``` – Caleb Feb 09 '22 at 11:21
  • Tried it, but unfortunately the result is still an `intro__secondary` and `img` that have too large a height. The image and `intro__secondary` utilize all available width, and while keeping aspect ratio, the height becomes too large. What I try to create is that the image utilizes maximum width and height, as long as the height is no larger than `intro__primary`. – Osocman Feb 09 '22 at 11:58
  • 1
    I've made edits above. Please check them out. I initially said min-height when I meant max-height....my bad. – Caleb Feb 09 '22 at 12:19
  • Thanks for your response again! I tried your suggestions, but they didn't work sadly! Now, I'm pretty sure the problem lies in the height property of `intro__secondary`, as It doesn't take the full height of the `split` container. This is probably because I've never explicitly stated the height of the `split` container. Any suggestions to solve this? – Osocman Feb 09 '22 at 12:40
  • Yeah I've added it in the second line of the snippet above. ```.split { max-height: 100px; }``` If it still dosen't work, add ```height: auto``` to all your divs. – Caleb Feb 09 '22 at 13:24
  • Thanks a lot for your help. `max-height : 100px` and `height : auto` didn't fix the problem in my situation. I found a solution though! Giving `position : relative` to `split` and `position : absolute` , `float : right` and `right : 0` to `intro__secondary` made it work. – Osocman Feb 09 '22 at 13:33