Question 406248 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make all images inside a div flex container match the size of the smallest image in the container?

I have a flex container with 4 images, 3 of which are the same size (200×134). However, there is one image that is larger (401×267). I want the larger image to contain itself and adjust its size to match the others. What CSS can be used to accomplish this? Do I need to use a different value for display rather than ‘display: flex;’ to accomplish this? I would like a solution where any images inside the container will always fix itself to match the size of the smallest image in the container. See below code for the scenario described where largerImage.jpg is the image that is bigger than the rest.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .imageBucket {
    background-color:#19744e;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-right: 10px;
    padding: 5px;
    }
    .container {
    justify-content:center;
    display: flex;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="imageBucket">
    <img src="smallerImage.jpg">
    </div>
    <div class="imageBucket">
    <img src="smallerImage.jpg">
    </div>
    <div class="imageBucket">
    <img src="largerImage.jpg">
    </div>
    <div class="imageBucket">
    <img src="smallerImage.jpg">
    </div>
    </div>
    </body>

I’ve attempted to style the images at times using the object-fit property to cover, contain, etc. but I haven’t been able to achieve the desired result.

If you are wondering why I want this outcome; it is because these images being displayed in the container will be used in a slide show. Having the images fix to one size will allow me to plug in images into this solution as needed. And having them be the same size looks much more professional, as opposed to one image being double the size of the others. See below for example.

Desired outcome:
Desired Outcome
Currrent outcome:
Current Outcome

Tags:

2

Answers


  1. 0

    I can interpret your question two ways:

    1. We have a preset understanding of the max-width we want a container to be. This is pretty simple to implement, we give all the images a max-width of 100% so they don’t overflow their container, and then set a max-width on the containers of whatever we want the value to be. I’m assuming 200px in the demo. In the demo, I included a checkbox which you can toggle on and off to see it add a max-width constraint in css.

    2. We have lots of dynamically sized elements that we may not know the size of, but we want the smallest to dictate the size of everything else. To accomplish this, we can use js to quickly scan through all our elements, see their computed widths, and then force a constraint to all of our elements based on what the smallest width is.

    If you need any clarification, please ask. Good luck!

    const get = query => [...document.querySelectorAll(query)];
get("#js-btn")[0].addEventListener("click", () => {
  const lis = get("li");
  const widths = lis.map(el => {
    const compStyles = window.getComputedStyle(el);
    const w = compStyles.getPropertyValue("width");
    return parseFloat(w);
  });
  const smallestWidth = Math.min(...widths);
  get("ul")[0].style.setProperty(
    "--max-w",
    `${smallestWidth}px`
  );
});
    ul, li {
  all: unset;
}

ul {
  display: flex;
  flex-wrap: wrap;
  --max-w: unset;
}

li {
  text-align: center;
  max-width: var(--max-w);
}

img {
  max-width: 100%;
}

label {
  user-select: none;
}

label:has(#max-200px:checked) ~ ul li {
  max-width: 200px;
}
    <label>
  <input type="checkbox" id="max-200px" />
  Make max-w of li 200px
</label>
<br />
<br />
<button id="js-btn">
  Use JS to find min-w and add constraint
</button>
<br />
<br />
<ul>
  <li>
    <img src="https://picsum.photos/200" />
    <p>Some text</p>
  </li>
  <li>
    <img src="https://picsum.photos/200" />
    <p>Some text</p>
  </li>
  <li>
    <img src="https://picsum.photos/200" />
    <p>Some text</p>
  </li>
  <li>
    <img src="https://picsum.photos/300" />
    <p>Some text</p>
  </li>
  <li>
    <img src="https://picsum.photos/200" />
    <p>Some text</p>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    What you are asking for cannot be easily done, but even if it could be easily done, I don’t think it’s a great idea. I recommend you take a different approach. Instead of allowing your layout to be determined by the size of the smallest image that you have, determine your layout independently and then create/select/resize images to fit the layout.

    Choose either of the following approaches:

    1. Style all your images to a fixed height. Choose the height which best suits your design (ignoring the actual size of your images). Your images will shrink to your specified height, keeping their intrinsic aspect ratio.

    enter image description here

    body {
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 1em;
}

.imageBucket {
  font-size: 12px;
  color: rgb(255 255 255 / 0.6);
  background-color: #19744e;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0;
  padding: 5px;
}

.imageBucket img {
  height: 120px;
}
    <div class="container">
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/820/500/700">
    <figcaption>Image 1</figcaption>
  </figure>
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/821/550">
    <figcaption>Image 2</figcaption>
  </figure>
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/822/600">
    <figcaption>Image 3</figcaption>
  </figure>
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/823/650/500">
    <figcaption>Image 4</figcaption>
  </figure>
</div>
    1. Style all your images to a fixed size (width and height). Choose the width and height which best suits your design (ignoring the actual size of your images). Use object-fit: cover to shrink and crop your images automatically to fit your chosen size.

    enter image description here

    body {
  font-family: sans-serif;
}

.container {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding-bottom: 1em;
}

.imageBucket {
  font-size: 12px;
  color: rgb(255 255 255 / 0.6);
  background-color: #19744e;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 0;
  padding: 5px;
}

.imageBucket img {
  width: 180px;
  height: 120px;
  object-fit: cover;
}
    <div class="container">
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/820/500/700">
    <figcaption>Image 1</figcaption>
  </figure>
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/821/550">
    <figcaption>Image 2</figcaption>
  </figure>
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/822/600">
    <figcaption>Image 3</figcaption>
  </figure>
  <figure class="imageBucket">
    <img src="https://picsum.photos/id/823/650/500">
    <figcaption>Image 4</figcaption>
  </figure>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search