I'm creating a Flickity slideshow where the images should fit the containing element so that there's no scrolling involved to see all the image. At the moment I have it so the images fill the available width but you get vertical scrolling.
I've created an example on jsFiddle of what I'm trying to do. I'm also using the LazySizes plugin and using srcset and sizes with Picturefill, but I don't think the issue is related to any of those as the problem seems to be that Flickity adds a height via inline styles to the flickity-viewport element which is calculated based on the natural height of the image, not its scaled height.
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;
}
}
The rest of the CSS comes from 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 seem to suggest I should be able to set a height of 100% in CSS, but whenever I add a height to the CSS or use setGallerySize: false, my gallery has no height.
