如何让无序列表中的图片及父LI在Chrome全屏模式下铺满屏幕

1. 重置基础样式，清除默认间距 #

先清除页面元素的默认内外边距，避免出现不必要的空白：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden; /* 阻止全屏模式下出现滚动条 */
}

2. 设置轮播容器（ul）样式 #

让容器完全占满屏幕视口，并横向排列轮播项：

.carousel-list {
  list-style: none;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex; /* 横向布局轮播项 */
}

3. 配置轮播项（li）样式 #

确保每个轮播项单独占满整个屏幕，不会被压缩：

.carousel-item {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0; /* 禁止项缩小，保持全屏尺寸 */
}

4. 图片适配核心设置 #

根据需求选择以下一种图片适配方式：

• 无裁剪、强制铺满（允许图片拉伸变形）：

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* 拉伸图片填充容器，无空白无裁剪 */
}

• 保持比例、铺满屏幕（裁剪超出部分，无空白）：

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 按比例缩放，裁剪超出区域，铺满容器 */
}

• 保持比例、完全显示（可能留空白，无裁剪）：

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 完整显示图片，容器可能出现空白 */
}

轮播逻辑适配 #

如果用JS控制轮播切换，平移距离要基于视口宽度（100vw）计算，比如切换到下一项时：

document.querySelector('.carousel-list').style.transform = 'translateX(-100vw)';

内容的提问来源于stack exchange，提问作者Fat Monk