如何用CSS实现双图分屏：左图左半+右图右半+中间虚线

可以通过flex布局配合object-position控制图片显示区域，再用伪元素添加中间虚线，完全不需要PS操作，具体实现如下：

HTML结构 #

<div class="split-image-container">
  <img src="你的第一张图片地址" alt="左侧图片" class="left-image">
  <img src="你的第二张图片地址" alt="右侧图片" class="right-image">
</div>

CSS样式 #

/* 容器样式：控制整体布局 */
.split-image-container {
  position: relative;
  max-width: 100%; /* 自适应屏幕宽度 */
  height: auto; /* 保持图片比例 */
  display: flex;
}

/* 中间虚线分隔线：用伪元素生成 */
.split-image-container::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 2px dashed #666; /* 虚线颜色、粗细可自定义 */
  transform: translateX(-50%);
  z-index: 1; /* 确保虚线在图片上方 */
}

/* 左右图片基础样式 */
.left-image, .right-image {
  width: 50%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

/* 左侧图片：只显示左半部分 */
.left-image {
  object-position: left center;
}

/* 右侧图片：只显示右半部分 */
.right-image {
  object-position: right center;
}

关键说明 #

• object-fit: cover：保证图片按比例填充容器，不会出现拉伸变形的情况
• object-position：精准控制图片的显示区域，left center让左侧图片只展示左半部分，right center让右侧图片只展示右半部分
• 伪元素::after：通过绝对定位放在容器正中间，生成虚线分隔线，无需额外HTML元素

内容的提问来源于stack exchange，提问作者Six of Eighteen