如何将图片20%移至网页边缘使其不可见？已尝试positioning、flex未果

核心逻辑很简单：用一个溢出隐藏的容器包裹图片，通过调整图片位置，让20%的内容移出容器范围，被容器的overflow:hidden规则隐藏，就能实现类似“半身处门外”的效果。

方法1：Position定位 + 溢出隐藏 #

先写HTML结构：

<div class="image-wrapper">
  <img src="你的图片路径" alt="半隐藏的显示器">
</div>

对应的CSS：

.image-wrapper {
  /* 关键：超出容器的内容直接隐藏 */
  overflow: hidden;
  /* 容器宽度设为图片可见部分的比例（要显示80%，就设80%） */
  width: 80%;
  /* 可选：根据布局需求调整容器位置，比如居中 */
  margin: 0 auto;
}

.image-wrapper img {
  position: relative;
  /* 向左偏移20%，把左侧20%的内容移出容器 */
  left: -20%;
  /* 图片宽度铺满容器，保证尺寸匹配 */
  width: 100%;
}

方法2：Transform平移 + 溢出隐藏（更简洁） #

如果觉得定位麻烦，用transform平移更直观：

.image-wrapper {
  overflow: hidden;
  width: 80%;
}

.image-wrapper img {
  /* 向左平移20%，效果和position的left偏移一致 */
  transform: translateX(-20%);
  width: 100%;
}

额外调整技巧 #

• 要是想隐藏右侧20%，把偏移值改成正的：left: 20% 或者 transform: translateX(20%)
• 如果需要固定可见宽度（比如400px），可以这么设置：

  .image-wrapper {
    overflow: hidden;
    width: 400px; /* 固定可见区域宽度 */
  }
  .image-wrapper img {
    width: 125%; /* 400px * 1.25 = 原图片宽度，刚好隐藏20% */
    transform: translateX(-20%);
  }
  

你之前用position或flex没成功，大概率是没给父容器加overflow:hidden——只移动图片但没限制溢出的话，图片只会整体移位，不会被截断隐藏。

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