画像がカルーセルの領域に収まるように修正していきます。
- 画像の大きさ調整
- 親要素の高さ指定
画像の大きさ調整
・前回までで画像を配置し簡単なスタイリングめでしてきました。
・ただ、まだ画像が大きすぎて領域からはみ出してしまっているので今回は領域内に収めていく方法について見ていきましょう。
・まず領域内に収めようと思ったら高さと幅を100％にしてあげれば領域内に画像が収まると考えられます。
・li imgに対してwidth: 100%;の指定とheight: 100%;の指定をしていきましょう。
親要素の高さ指定
・しかしこのままだと領域からはみ出してしまいます。これは高さを100％にしたいのであれば親要素の方も高さを指定する必要があるからです。
・なのでli imgの親要素であるliとulに対しても高さ100％を指定してあげましょう。
・こんな感じですね
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
li {
height: 100%;
}
li img {
width: 100%;
height: 100%;
}
・ただこのままだと画像が思っていたサイズで指定できず縦方向に潰れてしまっています。
・この辺については次回解決していきましょう。