CSSを使用してDIVのオーバーフローをクロップする

Question

HTMLとCSSに特定の高さと幅の画像を多数並べた行を作成しています。私がやっていることの例は、here on Imgurです。

各画像は、空白を取り除くために左にフローティングされ、全体としては正常に機能します。しかし、ブラウザを最小限に抑えると、表示するスペースが不十分で終了イメージが消えます。これの例は上記のImgurリンクで見ることができます。

CSSではオーバーフローをトリミングして、同じ高さを維持したまま画像を切り取って表示する方法はありますか？

更新：次のように私のコード、現時点では、次のとおりです（コンパイル後、SASSで書かれた）

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

はCSS：

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