How can I make my images responsive aligned in a scrollable row?

Question

I'm trying to align my images for a photography portfolio in a single, scrollable row and also want to make them responsive to window resizing and other screen sizes. Essentially to just have them shrink and grow as the screen changes. Previously I had them in a scrollable row but now that I've tried to make them responsive, they just adjust and shrink down and show the entire image gallery without scroll, but are really small since they are all trying to fit inside the window.

Here's what I have so far

 img { display: block; width: 100%; transition: .3s; }.flex-container { display: flex; padding: 5px; transition: .3s; overflow-x: scroll; }.sub-container { display: flex; flex-direction: row; overflow-x: auto; /*width: 50%;*/ }.gallery__thumb { position: relative; }

 <div class="flex-container"> <div class = "sub-container"> <figure class="gallery__thumb"> <img src="highq.jpg" alt=""> </figure> <figure class="gallery__thumb"> <img src="highq.jpg" alt=""> </figure> <figure class="gallery__thumb"> <img src="highq.jpg" alt=""> </figure> <figure class="gallery__thumb"> <img src="highq.jpg" alt=""> </figure> <figure class="gallery__thumb"> <img src="highq.jpg" alt=""> </figure> </div> </div>

Answer 1

You may want to consider adding a min-width to the images in percentage units of measurement . This will allow the images to grow in size and shrink always keeping the minimum amount of length as a percentage of the parents total width.

In the example below I reset margin and padding to 0 using a universal selector => * , this will remove any unseen/unwanted margin or padding set by default browser settings for elements.

Then we align the flex sub-container vertically using align-items: center; each figure element .gallery__thumb will set min-width: 33% . A slight gap of 10px margin between each remaining .gallery__thumb using general sibling combinator ~ => .gallery__thumb ~.gallery__thumb { margin-left: 10px; } .gallery__thumb ~.gallery__thumb { margin-left: 10px; } .

Now as you resize the browser there will always be 3 images showing no matter the size of the browser. If you want 4 to show, change to 25%, 5 to 20%, etc... In some cases, you may need to add a calculated measurement using width: calc(33% - 20px) , where 20 pixels may represent 10 pixels of left and right margin on a parent container for example.

See resizing browser GIF

 * { margin: 0; padding: 0; box-sizing: border-box; } img { display: block; width: 100%; }.gallery__thumb ~.gallery__thumb { margin-left: 10px; }.sub-container { display: flex; overflow-x: auto; align-items: center; }.gallery__thumb { min-width: 33%; }

 <div class="flex-container"> <div class="sub-container"> <figure class="gallery__thumb"> <img src="https://placeimg.com/300/260/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/320/260/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/310/280/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/340/280/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/300/260/any" alt=""> </figure> </div> </div>