Image in Flexbox Keeps Shrinking Down -(unwanted)

HTML & CSS
#1

Hello. I’m new here and despite this topic being somewhat common on the internet, I have tried for days to find the answer to my problem and I honestly cannot. So, I apologize in advance if my question sounds newbish and redundant.

I’ve attached a screen recording of the issue I’m having. The image to the left looks good until the viewport, hits a smaller breakpoint, then it starts shrinking and not filling up its flexbox.

Video

How can I fix this issue? Below is my code. It’s just a simple flexbox…

<style>
    * { 
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    .flex-container {
      max-width: 960px;
      margin: 50px auto;
    }

    .flex-row {
      max-width: 100%;
      max-height: 100%;
      display: flex;
      background-color: blueviolet;
    }

    .flex-item {
      flex: 1;
      flex-shrink: 0;
    }

    .flex-container img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    @media screen and (max-width: 500px) {
      .flex-row {
        flex-direction: column;
      }
    }
     
  </style>
</head>
<body>

    <div class="flex-container">
      <div class="flex-row">
        <div class="flex-item">
          <img src="/bacon.jpg" alt="">
        </div>
        <div class="flex-item">
          <h1>Text Container</h1>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, voluptatem. Molestias, quidem assumenda inventore doloribus in corporis temporibus debitis totam, saepe ullam voluptates facere fuga quisquam officiis modi iste eveniet excepturi. Veniam omnis molestias impedit tenetur modi excepturi. Vel, velit!</p>
        </div>
      </div>
    </div>
#2

In order to fill the box, do you want the image to stretch in both directions disregarding the aspect ratio?

1 Like
#3

The problem here is dissimilar content as flex items, image and text.
Their behaviour is different as the width decreases.
An image maintains an aspect ratio, as the width decreases, the height decreases in proportion.
With text, the opposite is true. As width decreases, lines get shorter and wrap sooner, making more lines, so height increases.
In short, images get shorter, text gets longer, when width decreases. Yet the container has to accommodate both.

This is initially a design problem, before it becomes a CSS problem.
So you first need to plan your design, to decide how you would want your layout to look at any given width, and handle the different behaviour of images and text.
Once you know how you want that to work, only then should you look at the CSS to make it happen.

For both items to always fill the height, they would need to change, to behave similarly.
One option, change text to maintain aspect. Two ways to do that, shrink the text or hide overflow. Shrinking would be hard to read. Cropping overflow would need scroll bars.
The other way is change the image to not maintain aspect, like the text. Again two methods. Unlock the aspect, so the image distorts its horizontal and vertical proportions. Or, crop off the sides of the image, so the frame aspect alters, but the pixel aspect remains intact.

The last option seems the lesser evil to me, but it is your design.

3 Likes
#4

This is an example using object-fit to fill a full-height container.
You are going to lose parts of the image to cropping at some sizes, this is unavoidable, for reasons explained above. But you can tweak the flex-basis values for the image and its container to optimise for the aspect and size of your particular picture.

3 Likes