Image should shrink but not grow above it's natural size

Question

I want an image to shrink but not grow above it's natural size. The solution given here is working fine: Make an image width 100% of parent div, but not bigger than its own width However when using it in a different context it's still growing above it's natural size.

section {
  display: flex;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

figure img {
  /* This image should shrink in a responsive way
            but not grow above it's natural size */
  max-width: 100%;
}

section p {
  flex: 1;
}

<section>
  <figure>
    <h4>The headline</h4>
    <img src="images/the-img.jpg">
    <figcaption>
      The caption.
    </figcaption>
  </figure>

  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</section>

Is there a way to pretend growing by CSS? Achieving this by Javascript would be no problem.

score 2 · Accepted Answer · answered Jun 05 '23 at 10:07

Just wrap your image in a div and the max-width:100% will be based on that rather than the flex container.

section {
  display: flex;
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

figure img {
  max-width: 100%;
}

section p {
  flex: 1;
}

<section>
  <figure>
    <h4>The headline</h4>
    <div><!-- added this -->
      <img src="https://picsum.photos/id/237/300/300">
    </div><!-- added this -->
    <figcaption>
      The caption.
    </figcaption>
  </figure>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</section>

Thanks for the quick solution, it's working fine. As the size of the figure is defined by flex:1 a gap originates when the width is large, however I can go with this. — Sempervivum, Jun 05 '23 at 10:39

Prem Chaudhary · Answer 2 · 2023-06-05T10:51:51.093

You want an image to shrink but not grow above its natural size. you can achieve this by

Solution 1: using a combination of max-width and align-self properties. just modify the css of img element as:


    figure img {
      width: auto;
      height: auto;
      max-width: 100%;
      align-self: flex-start; 
    }

In the figure img selector, we set the width and height properties to auto to maintain the aspect ratio of the image. The max-width property restricts the image from growing horizontally beyond its natural size. By setting align-self: flex-start, we align the image to the top of the container, allowing it to stretch vertically within the available space

Solution 2: the same can be achieved by setting an additional align-items property to flex-start, center or flex-end on the figure css. that will also prevent the stretching of inner img element beyond its natural width.


    figure {
        margin: 0;
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: flex-start;
    }

Unfortunately you didn't post the HTML you are referring to: With or without auxiliary div. I tried some variations but didn't get a satisfying result. — Sempervivum, Jun 06 '23 at 14:40

score 0 · Answer 3 · answered Jun 06 '23 at 14:31

I fiddled a bit more and in the end got rid of the gap: Set flex-basis of the container at the right to 50% and allow it to grow.

        section {
            display: flex;
        }

        figure {
            margin: 0;
            display: flex;
            flex-direction: column;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
        }

        figure img {
            /* This image should shrink in a responsive way
            but not grow above it's natural size */
            max-width: 100%;
        }

        section p {
            flex-basis: 50%;
            flex-grow: 1;
            flex-shrink: 0;
        }

HTML as posted by @Adam

Image should shrink but not grow above it's natural size

3 Answers3