响应式布局下双图并排clip-path失效，间隙无法保持问题求助

需求：两张图片并排显示，中间保留稳定间隙。
当前问题：浏览器缩放时，图片间隙无法稳定保持，要么图片重叠，要么间隙随浏览器拉伸而变大。
效果截图：

当前实现代码：

CSS 代码 #

.hs-media {
  --hs-media-overlap: 7.5rem;
  --hs-media-col-size: calc(var(--hs-media-overlap) / 2);
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: [one] auto [two-begins] minmax(0, var(--hs-media-col-size)) minmax(0, var(--hs-media-col-size)) [one-ends] auto [two];
}

[class*="hs-media__col-"] {
  grid-row: 1;
  position: relative;
  display: flex;
  min-block-size: 100%;
}

.hs-media__col-1 {
  grid-column: one/one-ends;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.hs-media__col-1::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  block-size: 100%;
  inline-size: 100%;
  background: rgba(51, 153, 68, 0.79);
  mix-blend-mode: multiply;
}

.hs-media__line {
  grid-column: one/line;
  grid-row: 1;
  block-size: 100%;
  background-color: white;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}

.hs-media__col-2 {
  grid-column: two-begins/two;
  clip-path: polygon(15% 0, 100% 0%, 100% 100%, 0% 100%);
}

.hs-media__image {
  inline-size: 100%;
  object-fit: cover;
}

HTML 代码 #

<ul class="hs-media">
  <li class="hs-media__col-1">
    <img src="https://source.unsplash.com/Ul-Cp7f_CGQ/1440x546" class="hs-media__image" />
  </li>

  <li class="hs-media__col-2">
    <img src="https://source.unsplash.com/t8QeaJkxp4M/1800x546" class="hs-media__image" />
  </li>
</ul>

问题根源在于原Grid布局用auto定义列宽，结合依赖固定变量的重叠计算，导致缩放时空间分配不稳定。改用固定间隙+固定值裁剪路径搭配Flex布局，可实现稳定效果：

修改后的 CSS 代码 #

.hs-media {
  list-style: none;
  display: flex;
  gap: 1rem; /* 固定间隙，缩放时保持不变 */
  width: 100%;
}

[class*="hs-media__col-"] {
  position: relative;
  flex: 1; /* 两张图片平分容器宽度 */
  overflow: hidden;
}

.hs-media__col-1 {
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1.5rem) 100%, 0% 100%);
  /* 用固定值定义裁剪偏移，避免百分比随容器宽度波动 */
}

.hs-media__col-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 153, 68, 0.79);
  mix-blend-mode: multiply;
}

.hs-media__col-2 {
  clip-path: polygon(1.5rem 0, 100% 0%, 100% 100%, 0% 100%);
  /* 与左侧裁剪偏移对应，保证视觉间隙稳定 */
}

.hs-media__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

核心修改思路 #

1. 替换Grid为Flex布局，用flex:1让两张图片始终平分容器宽度，缩放时比例稳定。
2. 用固定rem值定义裁剪路径的偏移量，代替原百分比，确保裁剪后的边缘位置不随容器宽度变化。
3. 保留gap:1rem作为基础间隙，结合裁剪偏移量，最终实现无论浏览器如何缩放，中间间隙都保持稳定的效果。

内容的提问来源于stack exchange，提问作者Dejan.S