Приведение изображений 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

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

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

Источник

2 ответа

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

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

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

body, html {
  height: 100%;
}
Источник

Попробуйте вариант adaptiveHeight когда Фликити начинает. Это помогло мне.

Источник
Другие вопросы по тегам