全屏轮播图需综合解决视口适配、图片失真、滚动穿透、全屏退出等关键问题：用 object-fit: cover 防变形，position: fixed 避滚动干扰，监听 fullscreenchange 响应全屏状态，touchstart/touchmove 阻止默认滚动，并在交互时暂停自动轮播。
全屏轮播图不是靠
简单撑开就能稳住的——它必须同时解决视口适配、图片拉伸失真、滚动穿透、键盘/手势退出等真实问题。
用
防止图片变形拉伸
直接给
设置
会导致图片被强行挤压。正确做法是让图片“覆盖”容器，自动裁剪多余部分：
是关键，它保持宽高比并填满容器，类似 CSS 背景的
避免用
（会留白）或
（必变形）
如果用
或
，确保每个
的尺寸比例一致，否则
裁剪位置会跳变
用
避免页面滚动干扰
轮播图区域若用
+
，当页面有其他内容时，用户滚动可能触发“滚动穿透”，导致轮播图跟着动或卡顿。更稳妥的方式是
固定定位
：
让轮播图脱离文档流，彻底无视父容器或页面滚动
务必加
，防止图片溢出或过渡动画错位
注意：如果轮播图需要随页面一起滚动（比如作为首屏模块而非真正全屏），那就不能用
，改用
+
处理
浏览器
全屏 API 与 Esc 退出逻辑
用户按
或调用
进入全屏后，轮播图需响应
事件重新计算尺寸；Esc 退出时也应恢复状态：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
不要监听
判断
键——浏览器全屏退出由系统接管，
才是唯一可靠钩子
移动端没有 F11，但
在 iOS Safari 中受限（需用户手势触发），Android Chrome 支持较好
若轮播图内含
，记得在进入全屏时调用
（iOS）或
（其他）
轮播切换时禁用
滚动并防抖点击
手指在轮播图上滑动切换时，若未阻止默认行为，容易触发页面整体滚动，尤其在 iOS Safari 上：
仅靠
不够——它只限制原生手势方向，无法阻止快速滑动时的页面跟随
切换按钮（如左右箭头）需加
在过渡中，防止连点触发多次切换
自动轮播的
必须在用户交互（hover / touch）时清除，并在交互结束后重启，否则会和手动切换冲突
真正稳定的全屏轮播图，90% 的坑不在动画逻辑，而在视口生命周期管理——从进入全屏、响应 resize、拦截手势，到退出时清理定时器和样式，每一步都得对浏览器行为有明确预期。
width: 100vw; height: 100vhobject-fit: coverwidth: 100%; height: 100vhobject-fit: coverbackground-size: covercontainfillsrcsetcoverposition: fixedposition: relativeheight: 100vh.fullscreen-slider {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100;
overflow: hidden;
}fixedoverflow: hiddenfixedmin-height: 100vhobject-fitF11requestFullscreen()fullscreenchangedocument.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
// 退出全屏：可重置定时器、暂停视频、恢复 body 滚动
clearTimeout(autoPlayTimer);
document.body.style.overflow = 'auto';
}
});keydownEscapefullscreenchangerequestFullscreen()video.webkitEnterFullscreen()video.requestFullscreen()bodylet isDragging = false;
slider.addEventListener('touchstart', (e) => {
isDragging = true;
e.preventDefault(); // 阻止初始滚动
});
slider.addEventListener('touchmove', (e) => {
if (isDragging) e.preventDefault();
});
slider.addEventListener('touchend', () => {
isDragging = false;
});touch-action: pan-ypointer-events: nonesetInterval