object-fitプロパティを使って画像の縦横比が保たれるようにしていきます。
- 画像の縦横比
- フレックスボックスの指定
- 画像を縮まないようにする
画像の縦横比
・前回までで領域内に画像を入れることができました。
・今回は間延びしてしまいがちな画像を元の画像の比率と変わらないように調整していきたいと思います。
・縦横比を変えずに指定する方法はいくつかありますが今回はobject-fitプロパティを使って行きましょう。
・li imgに対してbject-fit: cover;としてあげます。
・この指定をすることによって画像の縦横比は保ったまま領域全体を埋めてくれます。
フレックスボックスの指定
・次に画像を横並びにしていきます。
・やり方は簡単でulに対してdisplay; flex;を指定してあげましょう。
・こうすると領域内で画像が横並びになります。
画像を縮まないようにする
・横並びにしたのはいいけど画像が縮んでしまって横幅が思ったサイズになっていないと思います。
・これはflexアイテムは初期設定で縮むようになっているからです。
・これを解消するためにはliに対して最低限の幅を100％に指定して上げる必要があります。
・min-with: 100%;と指定してあげればいいですね。
・これで一枚の画像が領域内に入って余った画像は横に並んでいる状態になりました。
・後はこの横に並んだ領域外の画像は非表示にしてあげてJavaScriptで呼び出すようにしていけばいいですね。
・非表示はconteinerに対してoverflow: hidden;と飛び出た部分を表示しないと指定してあげましょう。
・CSS全体はこんな感じですね。
.container {
width: 80%;
height: 220px;
margin: 16px auto;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
}
li {
height: 100%;
min-width: 100%;
}
li img {
width: 100%;
height: 100%;
object-fit: cover;
}
li img {
width: 100%;
height: 100%;
}