如何在轮播图中使内容和视频高度相同

使用时 轮播元素 在 GemPages 中，您可能会注意到内容块和视频元素的高度不一致。这会导致布局看起来不均匀，尤其是在着陆页或产品展示页上。

本教程将向您展示如何使用简单的自定义 CSS 代码片段，使轮播元素中的视频高度自动与内容高度匹配。

为什么内容高度和视频高度不同？

默认情况下，内容和 视频元素 轮播图中的元素可以根据自身内容调整高度。

例如：

• 由于描述或按钮较长，文本列可能会变高。
• 视频栏可能保持其原始宽高比，但看起来会更短。

添加自定义 CSS 规则可以让视频元素拉伸并匹配内容部分的高度，从而实现更简洁、更专业的设计。

如何在轮播元素中使内容和视频高度相同

步骤 1：打开视频元素自定义代码面板

首先，您需要访问视频元素的自定义代码设置。

• 在 GemPages 编辑器中打开您的页面。
• 导航至轮播图元素。
• 点击 视频 旋转木马上的元素。
• 右键单击该元素。
• 点击 自定义代码.

步骤 2：添加 CSS 代码

将以下代码粘贴到“自定义代码”面板中：

.ElementClass {

 身高：100％;

}

这段 CSS 代码使视频元素占据轮播布局内的全部可用高度。

步骤 3：替换 .元素类 使用实际元素类

你需要更换 .元素类 使用您的 Video 元素的真实类名。

您可以在“自定义代码”面板顶部找到显示的类名。

第四步：预览并发布您的页面

添加代码后：

• 点击 预览 检查内容和视频现在是否显示为相同的高度。
• 在桌面端和移动端测试布局。
• 一切确认无误后，点击 发布 将更改应用到您的线上商店。