Question

我正在创建一个Flickity幻灯片，其中图片应该适合包含的元素，以便不需要滚动来查看所有图像。目前我拥有它，所以图像填充可用的宽度，但你得到垂直滚动。

我已经在jsFiddle创建了一个我想要做的例子。我还使用了LazySizes插件并将static func fetchRequestForChargeCodeTypeWithEmployeeNumber(context : NSManagedObjectContext, chargeCodeType : String, employeeId : Int) -> NSFetchRequest{ let entity = NSEntityDescription.entityForName("ChargeCodeType", inManagedObjectContext: context) let fetchRequest = NSFetchRequest() fetchRequest.entity = entity let typePredicate = NSPredicate(format: "type == %@ AND SUBQUERY(chargeCodes, $t, ANY $t.timeEntries.person.employeeID == %@).@count != 0", chargeCodeType, NSNumber(integer:employeeId)) fetchRequest.predicate = typePredicate return fetchRequest }和func constructDataSourceYearToDateUtilization(chargeCodeType : String){ let chargeCodeTypeFetchRequest = CoreDataUtilities.fetchRequestForChargeCodeTypeWithEmployeeNumber(coreDataStack.managedObjectContext, chargeCodeType: chargeCodeType, employeeId: employee.employeeID!.integerValue) chargeCodeTableDataSource = [YTDChargeCodeModel]() do { if let chargecodeType = try coreDataStack.managedObjectContext.executeFetchRequest(chargeCodeTypeFetchRequest).first as? ChargeCodeType { let chargeCodes = chargecodeType.chargeCodes?.allObjects as? [ChargeCode] yearToDateHoursSum = 0 for chargeCode in chargeCodes! { let ytdChargeCodeModel = YTDChargeCodeModel() ytdChargeCodeModel.chargeCode = chargeCode ytdChargeCodeModel.fullChargeCode = chargeCode.chargeCode ytdChargeCodeModel.chargeCodeDescription = chargeCode.chargeCodeDescription ytdChargeCodeModel.totalHours = chargeCode.valueForKeyPath("timeEntries.@sum.hours") as! Int yearToDateHoursSum = yearToDateHoursSum + ytdChargeCodeModel.totalHours chargeCodeTableDataSource.append(ytdChargeCodeModel) } totalHoursLabel.text = "\(yearToDateHoursSum)hrs" //Sort by charge code name. chargeCodeTableDataSource.sortInPlace { $0.fullChargeCode!.compare($1.fullChargeCode!) == .OrderedAscending } } else { print("Could not get the charge code type") totalHoursLabel.text = "0hrs" } } catch let error as NSError { print("Hit error when fetching user profile with error message: \(error.localizedDescription)") } tableView.reloadData() }与Picturefill一起使用，但我不认为这个问题与其中任何一个相关因为问题似乎是Flickity通过内联样式向srcset元素添加高度，该元素是根据图像的自然高度计算的，而不是基于缩放高度计算的。

HTML

sizes

SCSS

flickity-viewport

CSS的其余部分来自flickity.css

JS

 <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>

Flickity docs似乎暗示我应该能够在CSS中设置100％的高度，但每当我向CSS添加高度或使用.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; } }时，我的图库都没有高度。< / p>

Answer 1

我不确定这是否是您正在寻找的答案，但您可以在父容器（在本例中为正文）上设置高度，以便幻灯片放映的100％高度实际上有一个高度。

你可以在这里看到一个例子。 http://jsfiddle.net/jm82g4yr/

在这种情况下，我添加了这个css

body, html {
  height: 100%;
}

Answer 2

在Flickity inits时尝试选项adaptiveHeight。它帮助了我。

获取Flickity图像以适应

2 个答案: