Cropping the overflow of a DIV using CSS - css

Question

I'm creating a row with a number of images of a specific height and width in HTML and CSS. An example of what I'm doing can be seen here on Imgur.
Each image is simply an <img> tag floated to the left to remove whitespace and overall, it works successfully. However, when the browser is minimised, the end image disappears due to there being inadequate space to display it. An example of this can be seen on the above Imgur link.
Is there a way, in CSS, to crop the overflow so that a cropped version of the image (while maintaining the same height) is shown rather than no image?
Update: My code, at present, is as follows:
<div class="userbar">
<a href="#">
<img src="img.jpg" alt="Image">
</a>
... and so on, about 60 times
</div>
CSS (written in SASS then compiled):
.userbar {
max-height: 64px;
}
.userbar a {
float: left;
}
.userbar a img {
display: inline-block;
height: 64px;
width: 64px;
}

Answer 1

Use a container to wrap your images and make the container flex and hide the overflow-x. Is this you're looking for?
.image-container {
width: 100%;
display: flex;
overflow-x: hidden;
}
<div class="image-container">
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
<img src="https://unsplash.it/200/200/?random" />
</div>