如何实现图片全屏宽度显示且仅展示部分区域无溢出？

需求说明 #

需要图片以100%宽度占满容器，仅展示图片的指定区域，且超出部分完全隐藏，无溢出效果。当前代码未达到预期效果。

现有无效代码 #

CSS #

.intro_sea {
  position: absolute;
  width: 101%;
  clip-path: inset(30% 50% 0 0);
  margin: 0;
  padding: 0;
  bottom: 0;
}

HTML #

<img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161357.png" alt="huh" />
<img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161403.png" />
<img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161409.png" />

问题分析 #

1. 绝对定位的图片脱离文档流，无父容器限制时，溢出部分无法被裁剪
2. clip-path 虽能裁剪图片，但未配合容器的溢出控制，易出现布局混乱
3. 无固定高度的容器，无法明确显示区域的尺寸范围

修复方案 #

通过容器裁剪+精准定位/裁剪的组合实现需求，以下是两种可行方案：

方案一：容器溢出裁剪 + 图片定位 #

利用父容器的 overflow:hidden 隐藏超出部分，通过定位调整图片显示区域：

/* 父容器：控制宽度和裁剪范围 */
.intro_sea_container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* 设置你需要的显示高度，比如200px，根据需求调整 */
  height: 200px;
}

/* 图片：占满宽度，通过定位调整显示区域 */
.intro_sea {
  width: 100%;
  position: absolute;
  /* 向上移动30%，显示图片下半部分 */
  top: -30%;
  margin: 0;
  padding: 0;
}

<div class="intro_sea_container">
  <img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161357.png" alt="huh" />
</div>
<div class="intro_sea_container">
  <img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161403.png" />
</div>
<div class="intro_sea_container">
  <img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161409.png" />
</div>

方案二：容器裁剪 + clip-path 精准裁剪 #

保留 clip-path 同时配合容器控制溢出，适合需要不规则裁剪的场景：

.intro_sea_container {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 200px;
}

.intro_sea {
  width: 100%;
  position: absolute;
  /* 裁剪顶部30%、右侧50%，显示左下区域 */
  clip-path: inset(30% 50% 0 0);
  bottom: 0;
}

关键要点 #

• 必须给图片添加父容器，设置 overflow:hidden 和固定高度，确保溢出部分被隐藏
• 图片宽度设为 100%，保证占满容器宽度
• 可通过 position 或 clip-path 灵活调整显示的图片区域

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