Получение изображений Flickity для соответствия

Question

Я создаю слайд-шоу Flickity, где изображения должны соответствовать содержащемуся элементу, чтобы не было прокрутки, чтобы увидеть все изображение. На данный момент у меня есть это, поэтому изображения заполняют доступную ширину, но вы получаете вертикальную прокрутку.

Я создал пример на jsFiddle того, что я пытаюсь сделать. Я также использую плагин LazySizes и используя srcset и sizes с Picturefill, но я не думаю, что проблема связана с любым из них, поскольку проблема заключается в том, что Flickity добавляет высоту с помощью встроенных стилей в элемент flickity-viewport, который является рассчитанный на основе естественной высоты изображения, а не его масштабированной высоты.

HTML

<div class="gallery js-flickity" data-flickity-options='{ 
    "cellAlign": "left", 
    "contain": true, 
    "wrapAround": true, 
    "freeScroll": true, 
    "pageDots": false, 
    "imagesLoaded": true 
    }'> 
<div class="gallery-cell"> 
    <div class="ratio-box"> 
    <img data-src="http://lorempixel.com/320/238/sports/cell-1a/" data-srcset="http://lorempixel.com/320/238/sports/cell-1a/ 320w, 
     http://lorempixel.com/480/357/sports/cell-1a/ 480w, 
     http://lorempixel.com/600/446/sports/cell-1a/ 600w, 
     http://lorempixel.com/768/571/sports/cell-1a/ 768w" data-sizes="(min-aspect-ratio: 13/9.6) 74.29vh" alt="" class="lazyload"> 
    </div> 
</div> 
<div class="gallery-cell"> 
    <div class="ratio-box"> 
    <img data-src="http://lorempixel.com/320/238/sports/cell-1b/" data-srcset="http://lorempixel.com/320/238/sports/cell-1b/ 320w, 
     http://lorempixel.com/480/357/sports/cell-1b/ 480w, 
     http://lorempixel.com/600/446/sports/cell-1b/ 600w, 
     http://lorempixel.com/768/571/sports/cell-1b/ 768w" data-sizes="(min-aspect-ratio: 13/9.6) 74.29vh" alt="" class="lazyload"> 
    </div> 
</div> 
<div class="gallery-cell"> 
    <div class="ratio-box"> 
    <img data-src="http://lorempixel.com/320/238/sports/cell-1c/" data-srcset="http://lorempixel.com/320/238/sports/cell-1c/ 320w, 
     http://lorempixel.com/480/357/sports/cell-1c/ 480w, 
     http://lorempixel.com/600/446/sports/cell-1c/ 600w, 
     http://lorempixel.com/768/571/sports/cell-1c/ 768w" data-sizes="(min-aspect-ratio: 13/9.6) 74.29vh" alt="" class="lazyload"> 
    </div> 
</div> 

SCSS

.gallery, 
.gallery-cell { 
    /* height: 100%; 
    enabling this in conjunction with 
    'setGallerySize: false' means the gallery has no height */ 
} 

.gallery-cell { 
    width: 100%; 
    visibility: hidden; 
} 

.flickity-slider > .gallery-cell { 
    visibility: visible; 
} 

.ratio-box { 
    height: 0; 
    width: 100%; 
    padding-bottom: 74.3648961%; 
    position: relative; 
    img { 
    display: block; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
} 

Остальной CSS происходит от flickity.css

JS

window.lazySizesConfig = window.lazySizesConfig || {}; 
window.lazySizesConfig.loadMode = 1; 
window.lazySizesConfig.expand = 222; 
window.lazySizesConfig.expFactor = 1.6; 

(function() { 
var oldFlickityCreate = window.Flickity.prototype._create; 

window.Flickity.prototype._create = function() { 
    var that = this; 
    if (this.element.addEventListener) { 
    this.element.addEventListener('load', function() { 
     that.onresize(); 
    }, true); 
    } 
    this._create = oldFlickityCreate; 
    return oldFlickityCreate.apply(this, arguments); 
}; 
})(); 

The Flickity docs кажется, предполагают, я должен быть в состоянии установить высоту 100% в CSS, но всякий раз, когда я добавить высоту в CSS или использовать setGallerySize: false, моя галерея не имеет высоту.

Answer 1

Я не уверен, что это ответ, который вы ищете, но вы можете установить высоту в родительском контейнере (в данном случае в теле), чтобы высота 100% вашего слайд-шоу фактически имела высота.

Здесь вы можете увидеть пример. http://jsfiddle.net/jm82g4yr/

В этом случае, я добавил этот CSS

body, html { 
    height: 100%; 
} 

Answer 2

Попробуйте опцию adaptiveHeight когда Flickity inits. Это помогло мне.