Q&A
前提・実現したいこと
slickを使って異なる画像3枚をスライドさせたいのですが画像サイズをそろえることができません。
画像サイズは1枚目1000×600と二枚目1429×1000と三枚目1500×1000です。
画像の表示サイズをそろえて、縦横比を維持しつつ、はみ出た部分を切り取らずに画像全体を表示させたい。スマホで表示。
発生している問題・エラーメッセージ
以前の質問でも解決策としてあがっていたのですが、数々のサイトではheightをvwで設定することとobject-fit:cover;を記述することで解決できると紹介されているのですが、うまくいきません。
.slick-slide img {
width:100%;
height:55vw;
object-fit:cover;
}
とするとスライダーでの表示サイズは縦横揃うんですが、1枚目の画像がトリミングされて切れてしまいます。
object-fit:contain;にしてみると画像は全体表示されますが、三枚の画像サイズがそろわなくなります。
該当のソースコード
HTML
1<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"> 2<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"> 3<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 4<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script> 5<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 6<link rel="stylesheet" href="styles.css"> 7 8<div class="sliderArea"> 9 <ul class="slider"> 10<li><a href="＃" target="_blank"><img src="3.jpg"></a></li> 11<li><a href="＃" target="_blank"><img src="1000px.jpg" ></a></li> 12<li><a href="h＃" target="_blank"><img src="1.jpg"alt=""></a></li> 13</ul> 14</div>```ここに言語を入力 15コード
CSS
1.sliderArea { 2 max-width: 100%; 3 margin: 0 auto; 4 padding: 0 25px; 5} 6.sliderArea.w300 { 7 max-width: 300px; 8} 9.slick-slide { 10 margin: 0 5px; 11} 12.slick-slide img { 13 width:100%; 14 height:55vw; 15 object-fit:contain; 16backgroun:red; 17} 18 19.slick-slider{ 20 padding-left:0; 21} 22.slick-prev, .slick-next { 23 z-index: 1; 24} 25.slick-prev:before, .slick-next:before { 26 color: #000; 27} 28.slick-slide { 29 transition: all ease-in-out .3s; 30 opacity: .2; 31} 32.slick-active { 33 opacity: 1; 34} 35.slick-current { 36 opacity: 1; 37} 38.thumb { 39 margin: 20px 0 0; 40} 41.thumb .slick-slide { 42 cursor: pointer; 43} 44.thumb .slick-slide:hover { 45 opacity: .7; 46}
javascript
1<script> 2 $(function() { 3 $('.slider').slick({ 4 autoplay: true, 5 autoplaySpeed: 4000, 6 dots: true, 7 easing: 'ease-in-out', 8 pauseOnFocus: false, 9 pauseOnHover: false, 10 pauseOnDotsHover: false, 11 waitForAnimate: false, 12 13 }); 14 }); 15 $('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){ 16 $('.slider').slick('slickPlay'); 17 }); 18 </script>```
また、https://www.peko-step.com/tool/resize.htmlこちらのような画像サイズ変更サイトで1000×600を縦横比率を維持しつつ他の二枚とサイズの近い1500×900に変更してみるなどして設定しましたが、結果は同じでした。
どうぞよろしくお願いします。
追加です。
.slick-slide img {
width:100%;
height:100%;
}
.slick-track{
height:60vh;
}
と
<script> $(function() { $('.slider').slick({ autoplay: true, //オートプレイ autoplaySpeed: 4000, //オートプレイの切り替わり時間 dots: true, //下の点々 easing: 'ease-in-out', //スライドの動きを制御 pauseOnFocus: false, pauseOnHover: false, pauseOnDotsHover: false, waitForAnimate: false, variablewidth:true }); }); も試してみました。 しかし縦がそろわなくなってしまいました。 コード ```
回答1件
0
ベストアンサー
投稿2020/12/15 03:47
総合スコア36928
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/15 05:29
2020/12/15 06:47
2020/12/15 13:06
2020/12/15 13:34
2020/12/17 03:04
2020/12/17 06:41
2020/12/20 00:14