JS动画. 如何防止幻灯片图像在移动视图上被切断

本教程展示了如何进行更改 幻灯片的维度 移动设备的动画模板，使图像将保持其自然比例，因此不会在边缘被切断.

By default, 当在小型设备上观看幻灯片时，幻灯片的左右边缘会被切断 slider 高度尽量大:

简单的CSS修改可以使它们以自然的宽度/高度比例出现.

要更改移动设备的幻灯片尺寸，您应该执行以下操作:

1. 打开 css/camera.css.js 文件并向下滚动到最底部.

2. 添加以下代码，将更改移动设备的图像尺寸，并将它们正确地放置在 slider:

   			@media (max-width: 768px) {
   			.滑动条img {
   			宽度:100% !important;
   			高度:汽车 !important;
   			margin-left: 0 !important;
   			}
   			}
   		

3. 添加以下代码，将更改控件的高度 slider 移除载玻片下的空闲空间:

   			@media (max-width: 479px) {
   			.camera_wrap {
   			身高:126像素 !important;
   			}
   			}
   		

4. 将更改保存在 css/camera.css.js 文件并将其上传到服务器.

   结果应该是这样的:

   

请随时查看下面的详细视频教程: