【jquery】owl-carouselで高さをそろえたい

Question

###前提・実現したいこと
スライダーを設置する「owl-carousel」を使っています。
画像の高さをそろえて、正円にしたいです。

###発生している問題
異なる高さの画像を並べてそれらを正円にしたいが、正円にできません。

###該当のソースコード
以下でスライダーは実装できるのですが…

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<div class="owl-carousel">
  <div><a href="#"><img src="https://placehold.jp/300x150.png"></a></div>
  <div><a href="#"><img src="https://placehold.jp/300x150.png"></a></div>
  <div><a href="#"><img src="https://placehold.jp/300x150.png"></a></div>
</div>

img {
  border-radius: 50%;
}

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
      loop   : false,
      margin : 10,
      nav    : false,
      dots   : false,
      items  : 4
  });	
});

###試したこと
Stackoverflowのこのご回答によればautoHeight: trueでできるようなことが書いてあるのですが、以下のように追加してもできませんでした。

$(document).ready(function() {
  $(".owl-carousel").owlCarousel({
      loop   : false,
      margin : 10,
      nav    : false,
      dots   : false,
      items  : 4,
      autoHeight: true, // 追加
  });	
});

またはこのコメントではCSSでフレックスボックスを以下のようにすればできるとあったのですが、これもできませんでした。

img {
  border-radius: 50%;
}

 /* 以下を追加 */
.owl-carousel {
    display: flex;
}
.owl-carousel img {
    width: auto;
    height: 100%;
}

どうにかできそうでしたらぜひ教えて頂きたいと思います。
どうか宜しくお願いいたします。

Answer 1

こんな感じでいかがでしょうか?

.owl-item > div {
  width: 100%;
  padding-bottom: 100%; /* padding-bottomへの%指定は、横幅に対して何%か、という意味 */
  height: 0; /* padding-bottomだけで高さを指定したいので「0」にする */
  position: relative;
}
.owl-item > div > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.owl-item > div > a img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

padding-bottomに%指定し「横幅に対して高さが何%か」を指定するテクニックは、
YouTube動画埋め込みのレスポンシブ時の表示のシチュエーションでもよく使われるものです。

参考URL:
https://qiita.com/FJHoshi/items/11684c352aebc8d4f87b

Comments

[marimon]

どうもありがとうございます。そのようなテクニックがあったとわ。

仰るCSSで以下となり、かなり理想に近づきました。
https://jsfiddle.net/0g6deopk/

一点、Firefoxの場合に画像をスライドさせる際に、画像の間に縦線が出てしまうのですが、この解決策ももしご存じでしたらとワガママながら思うのですが、ていうかなんでしょうかこの縦線っ

[new1ro]

Mac Firefoxで見てみたのですが、こちらではでは再現できませんでした。
出たり出なかったり、画面サイズを変えるとちらつくような、表示のされ方でしょうか?

widthに小数が生じているので、関係があるかもしれません。
(小数はブラウザによって表示が変わりやすいので)

プラグインについて、深くは知らないので場当たり的な対応になりますが、
思い浮かぶのは以下です。
- ブラウザの「表示 > ズーム」が「等倍」になっているか確認
- 親要素含めて背景色を無しか、白にする
- 「.owl-item > div」にborder-radius: 50%;とoverflow: hidden;を指定 (できるだけ親の要素に。)
- float: left;ではなくdisplay: flex;を使ってみる

[marimon]

>Mac Firefoxで見てみたのですが、こちらではでは再現できませんでした。
こちらはwinですが、昨日だけの症状でした。なんだったのか謎です。

>出たり出なかったり、画面サイズを変えるとちらつくような、表示のされ方でしょうか?
画像は出るのですが、画像と画像の間に紫か赤の2pxくらいの縦線が出る症状でした。マウスで画像をクリックしてスライドさせようとするとその線が出るという不思議な現象で、まぁもう出ていないので無視しますｗ

>思い浮かぶのは以下です。
対応リストありがとうございます。次回また出たときに検証させて頂きます。