CSS: Make image fill parent but not change parent size

May 8, 2022

I have an image gallery and all of the images are squares. The images are in their own personal 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 it 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 basically 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:

<div class="ImagesContainer">

  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>
  <div> <img> </div>

</div>

Here is the css:

.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;
}

Anybody has an idea?

>Solution :

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;
    object-fit: cover;
    object-position: center;
}

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