- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我正在创建一个 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 docs似乎建议我应该能够在 CSS 中设置 100% 的高度,但每当我向 CSS 添加高度或使用 setGallerySize: false
时,我的图库都没有高度。
最佳答案
我不确定这是否是您正在寻找的答案,但您可以在父容器(在本例中为正文)上设置一个高度,以便幻灯片放映的 100% 高度实际上有一个高度.
你可以在这里看到一个例子。 http://jsfiddle.net/jm82g4yr/
在这种情况下,我添加了这个 css
body, html {
height: 100%;
}
关于javascript - 使 Flickity 图像适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34169304/
我正在制作一个简单的程序来更改我的计算机背景。我在网上发现了一个stackoverflow问题,或多或少涵盖了我想做的事情。我现在可以成功地将我的墙纸更改为平铺、居中和从在线图像 URL 拉伸(str
是的,这是另一个每组最大的问题之一!我已经尝试了几天,试图解决这个问题,但无济于事。我也一直在寻找,但我什至不知道我是否在正确的地方寻找。问题的最简化版本如下。 我有 2 个表,一个是多对多表,另一个
我想解析一些数据,我有一个 BNF 语法来解析它。谁能推荐任何能够生成可在移动设备上使用的代码的语法编译器? 由于这是针对 JavaME 的,因此生成的代码必须是: 希望很小 对外来 Java 库的依
我有一个动物园时间序列对象,vels : 2011-05-01 00:00:00 7.52 2011-05-01 00:10:00 7.69 2011-05-01 00:20:00 7.67 2011
我想创建一个供小型制造公司使用的生产管理系统。该系统将允许记录设备制造的不同阶段。要求如下: 1.非基于浏览器的界面。需要基于 Swing 或 AWT 的东西。虽然我了解实现基于浏览器的解决方案的便利
是否有任何 java 或 clojure 邮件库可以实现 lamson 的功能?特别是lamson的邮件路由功能非常酷http://verpa.wordpress.com/2010/11/13/mak
sklearn 中的 fit() 方法似乎在同一界面中服务于不同的目的。 应用于训练集时,像这样: model.fit(X_train, y_train) fit() 用于学习稍后将在测试集上使用 p
我使用 OSM 显示县的边界。它在大多数情况下工作得很好,但在某些情况下,县更大并且不适合 map 。 如何在开始渲染之前调整缩放级别? var map = L.map("mapCnty").setV
我正在致力于缩小和丑化我的 javascript 文件。我想知道合适的尺寸是多大。如果我将所有js文件合并成一个文件(经过缩小和丑化),它会大于1mb。我想,最好将它们分成 2-3 个文件(每个文件
我是 Java 新手。 我想在 GridPane 中放置一个 TextArea。我在过去几个小时内尝试了此操作,结果如下: 如您所见,TextArea 比我的 Gridpane 大得多。这是我的代码:
sklearn 中的 fit() 方法似乎在同一界面中服务于不同的目的。 应用于训练集时,像这样: model.fit(X_train, y_train) fit() 用于学习稍后将在测试集上使用 p
我认为这是一个基本问题,但也许我混淆了这些概念。 假设我使用 R forecast 包中的函数 auto.arima() 将 ARIMA 模型拟合到时间序列。该模型假设方差不变。我如何获得该方差?是残
我使用 OSM 显示县的边界。它在大多数情况下工作得很好,但在某些情况下,县更大并且不适合 map 。 如何在开始渲染之前调整缩放级别? var map = L.map("mapCnty").setV
我有一个很长的标签,这是我的第一个标签,我想把它放在我的单元格中。这就是我所拥有的,但它不起作用。 我有一个自定义的 UITabelviewCell ,里面有几个标签。 -(CGFloat)table
假设我有一个包含 WCS header 的 FITS 文件,这样我就可以执行以下操作: #import healpy as hp #import astropy.io.fits as pyfits #
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭10 年前。 Improve
我们正在构建一个与其他系统有多个集成接触点的应用程序。我们有效地使用 Unity 来满足我们所有的依赖注入(inject)需求。整个业务层是用接口(interface)驱动的方法构建的,实际实现在应用
我得到了 MKMapView 和一些注释。我使用下一个代码来显示所有注释: NSArray *coordinates = [self.mapView valueForKeyPath:@"annotat
我在一家托管公司工作,我们经常收到安装、新域、滞后修复等方面的请求。为了大致了解仍然开放的内容,我决定制作一个非常简单的票务系统。我有一点 php 知识和一点 MySQL 知识。目前,我们将根据客户的
我想向我的 UITableView 添加背景图像,它适合 UI,还具有导航 Controller 和工具栏。在那种情况下,我没有找到适合 iPhone 和 iPad 不同屏幕的 tableview 的
我是一名优秀的程序员,十分优秀!