Elementor Slides 背景图完整显示教程：实现 100% 宽度，高度自适应不裁切

在 WordPress 网站开发中，Elementor 的 Slides 幻灯片小工具非常常见。默认情况下，Slides 使用 CSS background-image + background-size: cover 来展示背景图。

这种设置会保证容器铺满，但缺点是：

图片经常被裁切，重要部分被遮挡；
不同设备（PC / 手机）显示效果差异很大；
想要“宽度 100%、高度随比例自适应”几乎做不到。

很多站长遇到的就是：前端图片始终不完整，影响美观和用户体验。

解决思路

要实现 宽度 100%，高度自动，其实有两个方向：

用 Image 小工具代替背景图（最彻底，但要调整幻灯片内容布局）；
保留背景图，但修改 CSS（更轻量，直接覆盖默认样式）。

本文介绍 方法 B：CSS 覆盖方案，既保留 Slides 组件，又能完整展示背景图。

具体实现步骤

1. 打开 Elementor 页面编辑器

进入你的网站后台 → 页面 → 编辑页面 → 打开 Elementor 页面编辑器。

2. 定位到 Slides 小工具

选中有问题的 Slides 幻灯片，确认背景图是通过“背景设置”上传的。

3. 添加自定义 CSS

在 Elementor 中，点选该 slides 进入 编辑 Slides → 高级设置 → Custom CSS（专业版支持），粘贴以下代码：

selector .swiper-slide {
    height: auto !important;
    min-height: unset !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

selector .swiper-slide-bg {
    position: relative !important;
    background-size: contain !important;  /* 改为完整展示 */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    width: 100% !important;
    padding-top: 56.25%; /* 根据图片比例调整：16:9 = 56.25%，4:3 = 75%，3:2 = 66.6% */
}

这里的 padding-top 用来维持容器比例：

16:9 图片 → padding-top: 56.25%
4:3 图片 → padding-top: 75%
3:2 图片 → padding-top: 66.6%

只要换算一下（公式：高度 / 宽度 × 100%），就能让容器高度跟随图片比例。

效果展示

修改后：

背景图会按原始比例完整显示，不会被裁切；
PC 和手机端都会宽度 100%、高度自适应；
上下可能会留白（因为 contain 会完整显示），但不会再丢失重要内容。

总结

通过一段简单的 CSS，我们就能让 Elementor Slides 背景图完整显示：

避免默认 cover 裁切；
保持原始比例自适应；
兼容 PC 与移动端。

如果你追求极致控制，可以直接用 Image 小工具来代替背景图；但大多数情况下，CSS 覆盖就足够解决问题。

Elementor Slides 背景图完整显示教程：实现宽度 100%，高度自适应不裁切

解决思路