flickity - Flickity 如何使轮播根据图像大小调整大小?
问题描述
我正在尝试实现类似于下图的效果。
蓝色 = 轮播幻灯片(作为图像)
绿色 = 轮播框架/视口/容器
红色 = 可见页面 (1440)
我有 5 张图像,所有图像都具有相同的分辨率(1024x576),我希望它们在根据屏幕尺寸放大/缩小的同时保持它们的比例。
我现在已经花了几个小时,但我一直无法实现我想要的。
我不想使用他们网站上大多数演示中显示的固定高度,因为在缩小到更小的设备时会出现问题。
我发布这个问题的原因是因为每当我尝试使用除固定高度以外的任何东西时,整个轮播都会崩溃,即使使用 AdaptiveHeight: true 和/或 setGallerySize: false 也是如此。
如果有帮助的话,我也在使用顺风。
任何帮助表示赞赏。
解决方案
也许你可以只通过 css 调整像这个演示这样的图像:
.carousel img {
display: block;
height: 200px;
}
推荐阅读
- r - 如何按 id 应用 grep() 数据
- javascript - 用jquery刷新python列表标签的值
- python - 将scrapy内置记录器设置在与用户代码记录器不同的级别
- swift - 在 NSTableView 中扩展行
- python - knitr:在乳胶中的python代码中升级到1.20版后忽略空行
- reactjs - 对未安装组件中的 setState 做出反应警告
- angular - 在Angular 4中选中复选框时启用输入字段
- html - CSS - 如何在 3 层中正确添加 3 张图像
- php - 使用 PHP 执行 shell 命令
- c++ - Windows 10 上的 CMake 不会生成可执行文件