Fill width of a div containing a horizontal array of images with css

Question

I have a container div with multiple varying-width, uniform-height images. The images are horizontally arranged with no gaps between them.

What I have so far:

 #imageContainer { width: 80%; border: 1px solid blue; position: relative; left: 50%; transform: translateX(-50%); } #images { display: flex; width: 80%; position: relative;important: margin; 2px: } #imageContainer img { display; inline-block: position; relative: margin; 1px; }

 <div id="imageContainer"> <div id="images"> <img src="https://dummyimage.com/400x100/000/fff" alt=""> <img src="https://dummyimage.com/320x100/000/fff" alt=""> <img src="https://dummyimage.com/420x100/000/fff" alt=""> <img src="https://dummyimage.com/540x100/000/fff" alt=""> </div> </div>

I would like for all of the images to scale to fit within my div , filling it, but I can't seem to find where I can do this with multiple images.

I question is basically this one but with a twist of also scaling to fit.

Answer 1

Unless you want a gap in your box you should remove width/position from the inner #images container. To make the images scale down you can add a min-width . If you want the images to not distort add an object-fit :

 #imageContainer { width: 80%; border: 1px solid blue; position: relative; left: 50%; transform: translateX(-50%); } #images { display: flex; margin: 2px; } #imageContainer img { display: inline-block; position: relative; margin: 1px; /* Important bits: */ min-width: 0; object-fit: contain; }

 <div id="imageContainer"> <div id="images"> <img src="https://dummyimage.com/400x100/000/fff" alt=""> <img src="https://dummyimage.com/320x100/000/fff" alt=""> <img src="https://dummyimage.com/420x100/000/fff" alt=""> <img src="https://dummyimage.com/540x100/000/fff" alt=""> </div> </div>

(Btw, centering using left + transform can cause blurriness in some rendering engines.)

Answer 2

I prefer using Bootstrap for most of my front-end styling as they provide lots of nifty "features" that make it easy for me to create a nice looking front-end without having to spend hours with CSS trying to get it looking perfect or making it scalable to multiple viewports.

Hence, here is how I would solve it using Bootstrap-4. (Here is a Codepen link)

<div class="container">
    <div class="row outline-primary">
        <div class="col">
            <img src="https://dummyimage.com/400x100/000/fff" class="img-fluid h-100">
        </div>

        <div class="col">
            <img src="https://dummyimage.com/320x100/000/fff" class="img-fluid h-100">
        </div>

        <div class="col">
            <img src="https://dummyimage.com/420x100/000/fff" class="img-fluid h-100">
        </div>

        <div class="col">
            <img src="https://dummyimage.com/540x100/000/fff" class="img-fluid h-100">
        </div>

    </div>
</div>