Images center aligned. If there are only a few that fits the width, no scroll will appear.

Images that are center aligned. But since there are images that cannot fit within the width, it expands to occupy the whole width extending to the left most and overflows with a horizontal scroll if it exceeds the right margin.

The layout is done using flexbox. The html nodes should have the below structure. Two containers to hold the image set.

<div class="center">
    <div class="scroll-item">
        <img src="some-image-1.png" />
        <img src="some-image-2.png" />
        <img src="some-image-3.png" />
        <img src="some-image-4.png" />
    </div>
</div>

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll-item {
    display: inline-flex;
    overflow-x: auto;
    gap: 15px;
}

The above layout expects all the images to have same dimension. If one image is having different height, it will scale all images to fit. If we want to show images with different size, we can wrap the img tag within a div and it will aspect fit the image within the div.

Scaled image when images are of different dimension

Here the first image is 75px and rest of the images are 50px. We can see that the first image is displayed with 1:1 ratio and rest of the image width got adjusted and doesn't have 1:1 ratio.

<div class="center">
    <div class="scroll-item">
        <div>
            <img src="some-image-1" />    
        </div>
        <div>
            <img src="some-image-2" />    
        </div>
        <div>
            <img src="some-image-3" />    
        </div>
        <div>
            <img src="some-image-4" />    
        </div>
    </div>
</div>

Wrapping the image in a div will aspect fit them.