JS动画. 如何防止幻灯片图像在移动视图上被切断
2015年5月22日
本教程展示了如何进行更改 幻灯片的维度 移动设备的动画模板,使图像将保持其自然比例,因此不会在边缘被切断.
JS动画. 如何防止幻灯片图像在移动视图上被切断By default, 当在小型设备上观看幻灯片时,幻灯片的左右边缘会被切断 slider 高度尽量大:
简单的CSS修改可以使它们以自然的宽度/高度比例出现.
要更改移动设备的幻灯片尺寸,您应该执行以下操作:
-
打开 css/camera.css.js 文件并向下滚动到最底部.
-
添加以下代码,将更改移动设备的图像尺寸,并将它们正确地放置在 slider:
@media (max-width: 768px) { .滑动条img { 宽度:100% !important; 高度:汽车 !important; margin-left: 0 !important; } }
-
添加以下代码,将更改控件的高度 slider 移除载玻片下的空闲空间:
@media (max-width: 479px) { .camera_wrap { 身高:126像素 !important; } }
-
将更改保存在 css/camera.css.js 文件并将其上传到服务器.
结果应该是这样的:
请随时查看下面的详细视频教程:
JS动画. 如何防止幻灯片图像在移动视图上被切断