水平スクロールギャラリーCSSだけで

Question

ここで私は必要なものを正確に示すのウェブサイトです。ここで

は、CSSを使用して、ウェブサイトの場合のみ：olivercurtisphotography.co.uk

しかし、いくつかの制限があります。
- 画像は、次のように埋め込まれIMG
- ギャラリーの幅をピクセル

で指定する必要があります

代わりに、私は
- divsする画像
- 画像の数に独立して適応するギャラリーここ

私は画像を埋め込む方法は次のとおりです。

HTML: 

<div class="img ratio" style="background-image: url(image.jpg);"></div> 


CSS: 

.img { 
background-size: cover; 
} 

.ratio:after { 
content: ''; 
display: inline-block; 
padding-top: 66.6666667%; 
} 

私は私が必要なものに似た何かを達成するための答えをたくさん見つけましたが、それらのどれも十分に近いではありません。

水平にスクロールする一連のdivを作成するにはどうすればよいですか？

Answer 1

フレックスボックスを使用できます。

#container{ 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    overflow-x: auto; 
 
} 
 
.img{ 
 
    flex: 0 0 auto; 
 
}

<div id="container"> 
 
    <div class="img"> 
 
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg"> 
 
    </div> 
 
    <div class="img"> 
 
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg"> 
 
    </div> 
 
    <div class="img"> 
 
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg"> 
 
    </div> 
 
    <div class="img"> 
 
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg"> 
 
    </div> 
 
    <div class="img"> 
 
    <img src="http://www.olivercurtisphotography.co.uk/projects/Volte-Face/Volte-face-01.jpg"> 
 
    </div> 
 
</div>

：次のコードをチェックしてください