讓Flickity圖像適合

我在創建一個Flickity幻燈片，其中的圖像應該適合包含元素，以便不需要滾動查看所有圖像。目前我擁有它，因此圖像填充了可用寬度，但是您可以垂直滾動。讓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

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); 
}; 
})();

的Flickity docs似乎表明我應該能夠設定的100％的高度在CSS，但每當我添加一個高度與CSS或使用setGallerySize: false，我的畫廊已經沒有高度。

來源

2015-12-09 Tyssen

我不確定這是否是您正在尋找的答案，但您可以在父容器（本例中爲身體）上設置高度，以便您的幻燈片的100％高度實際上會有一個高度高度。

你可以在這裏看到一個例子。 http://jsfiddle.net/jm82g4yr/

在這種情況下，我加入這個CSS

body, html { 
    height: 100%; 
}

來源

2015-12-09 03:42:33 aptsurdist

不幸的是，在我正在處理的完整示例中，畫廊不是「body」的直接子項。我身上已經有'身高：100％'，但是如果我在畫廊的父元素上也做了同樣的事情，它仍然會崩潰到沒有高度。我想我要做的就是寫一些js根據調整大小的圖像的高度將高度添加到「flickity-viewport」。 – Tyssen

嘗試選項adaptiveHeight時Flickity inits。它幫助了我。

來源

2016-08-14 19:31:33

讓Flickity圖像適合

回答

相關問題