質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

slickで異なるサイズの画像を切り取りや引き延ばすことなく縦横揃えたい

poppoko
poppoko

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

0クリップ

4600閲覧

投稿2020/12/14 17:39

編集2022/09/04 17:15

前提・実現したいこと

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 }); }); も試してみました。 しかし縦がそろわなくなってしまいました。 コード ```

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

こんにちは。

こういうことでしょうか?

JavaScript - slickのsliderで高さが異なる画像を揃える方法|teratail

投稿2020/12/15 03:47

Lhankor_Mhy

総合スコア33631

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

poppoko

2020/12/15 05:29

ご回答ありがとうございます。そうです、こちらの過去の質問にも目を通させてもらって試しました。 さらに回答にあるように .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 }); }); も試してみました。 しかし縦がそろわなくなってしまいました。
Lhankor_Mhy

2020/12/15 06:47

当方の回答のコードはお試しいただいていますか? もし、当方の回答のコードで希望に沿わない部分があるのであれば、お知らせいただいた方が話が早いと思います。
poppoko

2020/12/15 13:06

Lhankor_Mhyさまがサンプルで追記されていたコードを試させていたのが、上のコメントに書いておりますコードです。 そちらを試してみたけれど縦が揃えることができず… お知らせするとは、どちらへ何をお知らせするということでしょうか?? すみません理解力がなく…
Lhankor_Mhy

2020/12/15 13:34

> Lhankor_Mhyさまがサンプルで追記されていたコードを試させていたのが、上のコメントに書いておりますコードです。 ↓このコードは、私のコードとは異なるようでしたので、試行錯誤した後のものかと思いました。 .slick-slide img { width:100%; height:100%; } width:auto; に直してみてください。
poppoko

2020/12/17 03:04

width:auto; にしてみたのですが、横幅が枠からはみ出て次の画像と重なってしまいました。 縦横のサイズというか比率が違うからむずかしいのかな、なんて思ったりしていますが… ありがとうございます。
Lhankor_Mhy

2020/12/17 06:41

>横幅が枠からはみ出て次の画像と重なってしまいました variablewidth:true ↑これが間違っているからではないですか? 私の提示したコードは↓です。 variableWidth: true,
poppoko

2020/12/20 00:14

間違っていますね!失礼しました。 しかしそのコードにすると縦がそろわなくなってしまいました。 私のコードのどこかしらが影響しているかもしれませんがちょっとわからないです。 次回新たに作成するときにまた試させていただきます。ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。