Question 182631 in CSS Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search