fc2のホームページで、こういう画像3つがスライダーになっているプロフィールページを作ってみました。
元にしたテンプレートはこれ。
CSSのこの部分の意味を、検索しながら、理解を試みました。
li.slider-mainItem-img
mainItem-imgに設定した画像をスライダーにする。
object-fit: cover;
coverにするとアスペクト比を維持したままコンテンツボックス全体を埋めるように拡大縮小される。
width: 100vw;
100vwは100%のこと。
font-family: 'object-fit: cover;';
IEでも表示されるように入れている何か。
その後、HTMLの画像の部分を
<ul class="slider-mainItem">
<li class="slider-mainItem-img"><img src="画像1.jpg" alt="image01" /></li>
<li class="slider-mainItem-img"><img src="画像2.jpg" alt="image02" /></li>
<li class="slider-mainItem-img"><img src="画像3.jpg" alt="image03" /></li>
</ul>
にすれば良し。
