如何通过HTML & CSS将图片移至屏幕边缘并实现裁切

要实现把投票者手部图片完全贴紧屏幕边缘、裁切衣袖的效果，你需要调整图片的定位偏移，同时清除页面默认边距，修改后的代码如下：

修改后的HTML #

<img src="Voter.png" alt="手持选票的投票者" class="top-left-image">

（注：fixed定位的元素不需要外层relative容器，可直接简化结构）

修改后的CSS #

/* 清除页面默认边距，避免留白影响图片贴边 */
body {
  margin: 0;
  padding: 0;
}

.top-left-image {
  position: fixed;
  /* 向左偏移视口，数值根据需要裁切的衣袖宽度调整 */
  left: -50px;
  top: 0;
  /* 让图片高度铺满视口垂直区域 */
  height: 100vh;
  /* 保持图片比例并填满指定区域 */
  object-fit: cover;
  /* 强制图片左侧对齐，确保手部区域在视口内 */
  object-position: left top;
  z-index: 9999;
  /* 可选：避免图片干扰页面其他交互 */
  pointer-events: none;
}

关键调整说明 #

• left: -50px：核心设置，让图片向左超出视口范围，衣袖部分会被视口自动裁切，你可以根据图片实际尺寸调整偏移数值
• 清除body默认边距：避免页面自带的留白导致图片无法完全贴紧屏幕边缘
• object-position: left top：确保图片的左侧边缘（衣袖部分）优先向左偏移，手部区域保持在视口内

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