I have a flex container with 4 images, 3 of which are the same size (200x134). However, there is one image that is larger (401x267). 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:
Currrent outcome: