CSS: Make image fill parent but not change parent size

Question

I have an image gallery and all of the images are squares. The images are in their divs and a big div with the display to flex to parent all the divs. I want the images to fill their parent div, but not make them bigger.

UPDATE: I saw on this website that the flex-grow property does NOT add to the (usable) width of the element. Go see the website for a further explanation, but that means I have to use something else than flex-grow to make my parent divs the width of the top div.
Also, I do not want a fixed amount of items on a line!! What I want is when you scale up the window, the elements get wider and wider until a point, where you then shrink the elements and add one from under to the line above.

Here is what I have:

Here is what I want:

Here is my code:

.ImagesContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    margin-top: 1rem;
    width: 100%;
}

.ImagesContainer img {
    width: 20vw;
    min-width: 200px;
    margin: 5px;
    transition-duration: 200ms;
}

.ImagesContainer div {
    background-color: red;
    flex-grow: 1;
}

<div class="ImagesContainer">

  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>
  <div> <img src="https://picsum.photos/200"> </div>

</div>

Does anybody have an idea?

Have you tried clearing the margin on the image and clearing the padding on the containers? Could you also send over the styles you are currently using so we can take a look. — ItzHex, May 08 '22 at 19:08
Oh whoops, i removed it now, but it didn't change anything... — nico_qwer, May 08 '22 at 19:23
The ``flex-grow`` on your ``ImageContainer div`` will be the reason why you have the extra space on the right and bottom of your image, you could set the height and width of the image to take up the whole of the box instead of just its default size. — ItzHex, May 08 '22 at 19:23
That's exactly what i am trying to do, but when i do width: 100%; it fills the entire width of the top div. — nico_qwer, May 08 '22 at 19:25
Does this answer your question? [Flexbox: 4 items per row](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row) — ItzHex, May 08 '22 at 19:25
That would be because ``flex-grow`` does not resize the size of your container but instead try to fill up the free space. — ItzHex, May 08 '22 at 19:26
`object-fit: contain` + `width: 100%` on the image? A workign [repro] would help. CSS alone is useless to us without knowing your HTML markup. — tacoshy, May 08 '22 at 19:38
You could give your items a fixed width and use ``justify-content: space-evenly` for your outer container. — ItzHex, May 08 '22 at 19:48

score 2 · Accepted Answer · answered May 08 '22 at 21:51

UPDATE: The method I was using (With flexbox) did not do what I wanted finally so I decided to use css grid and it did it perfectly!
Here is the new css (same html):

.ImagesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .25rem;
    width: 100%;
}

.ImagesContainer img {
    width: 100%;
    height: 100%;
}

.ImagesContainer a {
    padding: 5px;
}

Thank you to everyone, your answers helped me understand css better!

Fely Spring · Answer 2 · 2022-05-08T20:10:51.547

You need to give width to image wrapper only and fit the image appropriately. If you want some part of your div be seen, you can add padding property to it. By adding "object-fit: cover" property to your image you can scale it to fit its parent's width, and "object-position: center" in case your image is not square and a part of it gets cut.

    .ImagesContainer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .25rem;
        margin-top: 1rem;
        width: 100%;    
    }

    .ImagesContainer img {     
        transition-duration: 200ms;
        width: 100%;
        object-fit: cover;
        object-position: center;
    }

    .ImagesContainer div {
        background-color: red;
        flex-grow: 1;    
        width: 20vw;
        min-width: 200px;
        padding: 5px;
    }

    <div class="ImagesContainer">
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>
      <div> <img src="https://picsum.photos/200"> </div>

    </div>

CSS: Make image fill parent but not change parent size

2 Answers2