CSS中解决图片溢出容器的问题求助

看起来你遇到的核心问题是绝对定位的图片脱离了容器的文档流管控，导致.image-holder的overflow: hidden完全不起作用——因为你没有给.image-holder设置position: relative，所以header-map是相对于<body>而不是容器定位的，自然不会被容器的溢出隐藏规则限制。再加上你用了极端的clip-path超大像素值和定位参数，进一步让图片的显示完全失控。

下面是针对性的解决方案，我会一步步拆解问题并给出修改后的完整代码：

问题根源分析 #

1. 父容器.image-holder未设置position: relative，绝对定位的子元素会跳过它，以最近的非static父元素（这里是<body>）为定位基准，所以容器的overflow: hidden对图片无效。
2. clip-path: inset(3900px 2250px 500px 200px)使用了超大的固定像素值，完全脱离容器尺寸，相当于直接把图片的大部分区域裁切掉，只剩极小一块，逻辑完全不合理。
3. text-shadow: black是无效写法，正确的text-shadow需要指定偏移、模糊和颜色值。
4. top: -400%; left: -40%这种极端定位值让图片彻底脱离容器可视范围，后续的object-fit也无法发挥作用。

修改后的完整代码 #

CSS

html, body { 
  text-align: center; 
  color: black; 
  font-family: "EB Garamond", serif; 
  background-color: #fdf6e5; 
  width: 100%;
  margin: 0; /* 移除body默认外边距，避免容器横向滚动条 */
  padding: 0;
} 

.image-holder { 
  font-weight: bold; 
  font-size: 72px; 
  background-color: #573809; 
  color: #fdf6e5; 
  text-shadow: 0 0 3px rgba(0,0,0,0.8); /* 修正阴影写法，让文字更清晰 */
  border: 10px solid #BB7025; 
  width: 100%; 
  height: 200px; 
  overflow: hidden; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  position: relative; /* 关键：让绝对定位子元素以该容器为基准 */
} 

.image-holder .header-map { 
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-9.6deg); /* 先居中再旋转，定位更可控 */
  opacity: 0.25; 
  width: 150%; /* 让图片覆盖容器，超出部分被overflow:hidden隐藏 */
  height: 150%;
  object-fit: cover; /* 保持图片比例，智能裁剪超出区域 */
  /* 如果需要自定义裁剪范围，可以用百分比的clip-path，比如：
  clip-path: inset(10% 15% 10% 15%); */
}

HTML

<div class="image-holder">
  The Baluchestan Project 
  <img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Bokhara%2C_Afghanistan%2C_Beloochistan%2C_etc._LOC_2004629039.jpg" class="header-map"/>
</div>

关键修改点说明 #

1. 给.image-holder添加position: relative：这是让绝对定位子元素归属于容器的核心，此时容器的overflow: hidden才能对图片生效，隐藏超出容器的部分。
2. 重构图片定位逻辑：用top:50% + left:50% + transform: translate(-50%, -50%)实现图片在容器内的精确居中，再叠加旋转效果，比极端的top/-left值可控得多。
3. 替换不合理的clip-path：改用width:150% + height:150% + object-fit: cover让图片覆盖整个容器，同时保持比例，超出部分自动被容器裁剪。如果需要特定的裁剪区域，可以用百分比单位的clip-path: inset()（比如inset(10% 15% 10% 15%)），这样会基于容器尺寸动态调整，适配不同屏幕。
4. 修正text-shadow写法：让文字阴影正常显示，提升可读性。
5. 移除body默认边距：避免容器出现横向滚动条，保证页面布局整洁。

如果还需要微调图片的显示位置，只需要调整transform里的参数（比如在translate里加偏移值，或者修改width/height的百分比）即可，完全不需要用超大像素值的clip-path。

内容来源于stack exchange