前提・実現したいこと
javascript初心者のため教えて頂けると助かります。
slickを使ってsliderを作成致しました。
幅・高さが違う画像を登録した時、高さがバラバラになってしまうため揃えたいです。
ただ揃えるだけでなく中央の画像を必ずセンターに来るようにしたいです。
発生している問題・エラーメッセージ
違う高さを登録した時高さがバラバラになります。
高さを揃えたいため、それぞれの画像のwidthはバラバラのまま、つまり比率を保持した状態で高さを揃えたいです。
該当のソースコード
<script> $("document").ready(function(){ $('.mypattern').slick({ autoplay: true, autoplaySpeed: 2500, speed: 800, arrows: false, centerMode: true, centerPadding: '25%' }); }); </script> <style> * { margin: 0; padding: 0; } .slider { width: 90%; margin: 0 auto 80px; } .slick-slide img { width: 100%; height: auto; } .mypattern{ width: 100%; } .mypattern .slick-slide{ margin: 0px 50px; } </style> <div class="content"> <div class="slider mypattern"> <div><a href="#"><img src="img/w800pxh600px.jpg"></a></div> <div><a href="#"><img src="img/w850pxh550px.jpg"></a></div> <div><a href="#"><img src="img/w800pxh600px.jpg"></a></div> <div><a href="#"><img src="img/w850h250px.jpg"></a></div> </div> </div>
試したこと
widthではなくheightを設定。 しかしimgがいっぱいになってしまったり、比率が固定できても中央の画像がセンターではなくズレたり、画像の左右の幅にばらつきが出てしまいました。 綺麗に高さを調整・中央の画像をセンターに・画像の左右を均一に する方法はありますでしょうか。 よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/27 06:13
2020/11/27 06:18
2020/11/27 06:22
2020/11/28 02:12
2020/11/30 04:14