Обрезание переполнения DIV с помощью CSS

Question

Я создаю строку с количеством изображений определенной высоты и ширины в HTML и CSS. Пример того, что я делаю, можно увидеть here on Imgur.

Каждое изображение является просто тегом <img>, размещенным слева, чтобы удалить пробелы и в целом, он работает успешно. Однако, когда браузер сведен к минимуму, конечное изображение исчезает из-за недостаточного пространства для его отображения. Пример этого можно увидеть на приведенной выше ссылке Imgur.

Есть ли способ в CSS, чтобы обрезать переполнение так, чтобы отображалась обрезанная версия изображения (при сохранении одинаковой высоты), а не изображение?

Update: Мой код, в настоящее время выглядит следующим образом:

<div class="userbar"> 
    <a href="#"> 
     <img src="img.jpg" alt="Image"> 
    </a> 
    ... and so on, about 60 times 
</div> 

CSS (написанный в SASS затем компилируется):

.userbar { 
    max-height: 64px; 
} 

.userbar a { 
    float: left; 
} 

.userbar a img { 
    display: inline-block; 
    height: 64px; 
    width: 64px; 
} 

Answer 1

использовать контейнер, чтобы обернуть изображения и сделать контейнер flex и скрыть overflow-x. Это вы ищете?

.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>