Flickityで画像の高さが取得できないときがある

スライドショーのFlickityをスマホに導入しました。
http://flickity.metafizzy.co/

レスポンシブルなため、設定は width 100% height auto にしていますが、
これだと更新ボタンを押した時にうまく高さを取得できず height 21px となることが5回に1回くらい起きます。

この現象をどうにか制御する方法はないでしょうか？

高さを指定できれば問題ないのだと思うのですが、スマホの様々な端末に横幅100％で表示させたいため、それはできません。

ソースは、下記のサイトで紹介しているものを参考にして
作成しています。
http://on-ze.com/archives/2147

<ul id="flickity" class="js-flickity" data-flickity-options='{ "cellAlign": "left", "prevNextButtons": false }'>
<li class="gallery-cell"><a href="/contact">コンテンツ</a></li>
<li class="gallery-cell"><a href="/contact">コンテンツ</a></li>
<li class="gallery-cell"><a href="/contact">コンテンツ</a></li>
</ul>

kei344

2017/02/13 15:32

コンテンツは全部同じ高さですか？また、画像ですか？

退会済みユーザー

2017/02/13 20:25

同じ高さの画像です。

行動規範の内容に同意します

回答1件

ベストアンサー

「width 100% ＝画面幅」であるなら、height に vw を使えば固定できると思います。

CSS
1height: 50vw; /* 画像比率2：1の場合。 100 × ( 画像幅 ÷ 画像高) */

【CSS には vw, vh, vmin, vmax という単位がある｜ Developers.IO】
http://dev.classmethod.jp/ria/html5/css-length-viewport/

「width 100% ＝画面幅」でない場合、下記テクニックを流用すれば高さを必ず持てると思います。

【Webページにサイズ可変の YouTube 動画を埋め込む | Web Tips】
http://weback.net/general/2170/#contents-3

CSS
1.video {
2	position: relative;
3	padding-bottom : 56.25%;
4}
5.video iframe {
6	position: absolute;
7	top: 0;
8	left: 0;
9	width: 100%;
10	height: 100%;
11}