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

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

ただいまの
回答率

88.21%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 438

poppoko

score 5

前提・実現したいこと

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;にしてみると画像は全体表示されますが、三枚の画像サイズがそろわなくなります。

該当のソースコード

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">

<div class="sliderArea">
  <ul class="slider">
<li><a href="https://item.rakuten.co.jp/sanleaves-official/10000002/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/sanleaves-official/mizukiri/%E7%94%BB%E5%83%8F3.jpg"alt="水きりマット"></a></li>
<li><a href="https://item.rakuten.co.jp/sanleaves-official/10000000/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/sanleaves-official/microfibercloth/%E2%91%A0%201429x1000px.jpg" alt="洗車タオル"></a></li>
<li><a href="https://item.rakuten.co.jp/sanleaves-official/10000005/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/sanleaves-official/hanger/20200123-1.jpg"alt="クリップハンガー"></a></li>
</ul>
</div>```ここに言語を入力  
コード  
.sliderArea {  
max-width: 100%;  
margin: 0 auto;  
padding: 0 25px;  
}  
.sliderArea.w300 {  
max-width: 300px;  
}  
.slick-slide {  
margin: 0 5px;  
}  
.slick-slide img {  
width:100%;  
height:55vw;  
object-fit:contain;  
backgroun:red;  
}  

.slick-slider{  
padding-left:0;  
}  
.slick-prev, .slick-next {  
z-index: 1;  
}  
.slick-prev:before, .slick-next:before {  
color: #000;  
}  
.slick-slide {  
transition: all ease-in-out .3s;  
opacity: .2;  
}  
.slick-active {  
opacity: 1;  
}  
.slick-current {  
opacity: 1;  
}  
.thumb {  
margin: 20px 0 0;  
}  
.thumb .slick-slide {  
cursor: pointer;  
}  
.thumb .slick-slide:hover {  
opacity: .7;  
}  
<script>  
$(function() {  
$('.slider').slick({  
autoplay: true,   
autoplaySpeed: 4000,   
dots: true,   
easing: 'ease-in-out',   
pauseOnFocus: false,  
pauseOnHover: false,  
pauseOnDotsHover: false,  
waitForAnimate: false,  

});  
});  
$('.slider').on('touchmove', function(event, slick, currentSlide, nextSlide){  
$('.slider').slick('slickPlay');  
});  
</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日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/12/17 12:04

    width:auto; にしてみたのですが、横幅が枠からはみ出て次の画像と重なってしまいました。

    縦横のサイズというか比率が違うからむずかしいのかな、なんて思ったりしていますが…

    ありがとうございます。

    キャンセル

  • 2020/12/17 15:41

    >横幅が枠からはみ出て次の画像と重なってしまいました

    variablewidth:true
    ↑これが間違っているからではないですか?
    私の提示したコードは↓です。
    variableWidth: true,

    キャンセル

  • 2020/12/20 09:14

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

    キャンセル

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

  • ただいまの回答率 88.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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