🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

22215閲覧

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

ojreee

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/27 05:42

編集2020/11/27 05:46

前提・実現したいこと

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がいっぱいになってしまったり、比率が固定できても中央の画像がセンターではなくズレたり、画像の左右の幅にばらつきが出てしまいました。 綺麗に高さを調整・中央の画像をセンターに・画像の左右を均一に する方法はありますでしょうか。 よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

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

総合スコア36928

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ojreee

2020/11/27 06:13

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

2020/11/27 06:18

ああ、そうか、widthを揃えたくないのですね。では object-fit では上手くいかないです、すみません。 もう少し考えてみます。
ojreee

2020/11/27 06:22

とんでもないです。 そうだったのですね、別の機会でwidthを揃えたい場合にはこちらを参考にさせて頂きます。 こちらこそすみません、ありがとうございます。
ojreee

2020/11/30 04:14

お調べして頂いたにも関わらずお返事が遅くなってしまい大変申し訳ございません。 実行してみたところ無事高さが揃った状態で動きました! 高さをどう変更して動かしていけばいいかわからなかったため参考になりました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問