前提・実現したいこと

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件

ベストアンサー

こんにちは。

object-fit じゃないかな、と思ってググったところ、そのような記事を書いている方がいらっしゃいました。

高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】 | デザインレベルアップ

追記

こんな感じではどうでしょうか。

サンプル

css
1        .slick-slide img {
2            width: auto; /* 変更 */
3            height: 100%; /* 変更 */
4        }
5        .slick-track{ /* 追加 */
6            height: 50vh;
7        }

js
1        $("document").ready(function () {
2            $('.mypattern').slick({
3                autoplay: true,
4                autoplaySpeed: 2500,
5                speed: 800,
6                arrows: false,
7                centerMode: true,
8                centerPadding: '25%',
9                variableWidth: true, // 追加
10            });
11        });

投稿2020/11/27 06:01

編集2020/11/28 02:12

Lhankor_Mhy

総合スコア36960

ojreee

2020/11/27 06:13

こんにちは。リンクまで張って頂き助かります、ありがとうございます。記事にあった .slider img { width: 100%; height: 50vw; object-fit: cover; } を入れてみたところ、高さは無事統一されたのですが幅も統一された状態になりました。画像が引き延ばされたわけではなく、画像が原寸のままそのサイズに切り取られている感じで配置されてしまいました。 widthを削除したり色々調整してみたところ幅の比率がそのままで高さが揃った状態になりましたが画像と画像の間(左右の空白幅)が均一にならずsliderの画像と画像が重なったり、真ん中に表示されている画像がセンターにならなかったりしてしまいました。ありがとうございました、もう少し送っていただいたサイトを確認しながら触ってみます。