实现含交互元素的等比例列宽自适应，保持中间凹口比例一致

嘿，我仔细看了你的问题和代码，其实你的初始思路完全可以救回来！核心问题在于右边用了PNG图（缩放容易失真），还有布局的宽度控制没到位，调整几个点就能实现你要的效果：

问题分析 #

你现在用flex的space-between布局，加上固定的max-width，导致两列缩放时比例容易失调；而且右边的PNG凹口图在缩放时很难和左边SVG保持比例一致，换成SVG就能解决这个问题。

具体修改方案 #

1. 改用CSS Grid实现等宽列（或调整Flex布局）

Grid天生适合这种等比例分栏的需求，直接让两列各占1fr，确保无论浏览器怎么缩放，两列宽度始终一致：

.main {
  border: 1px solid #000;
  padding: 22px;
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  gap: 0; /* 去掉间距，让两列紧贴，凹口在SVG内部衔接 */
  align-items: flex-start;
}

如果偏爱Flex，也可以把容器改成flex:1，去掉justify-content: space-between：

.main {
  display: flex;
  align-items: flex-start;
}
.container {
  flex: 1; /* 两列平分可用宽度 */
  width: 100%;
}

2. 把右边的PNG换成SVG，保持凹口比例

PNG缩放会失真，换成SVG后，不仅能完美保持比例，还能和左边SVG精准衔接。你可以把提供的完整SVG拆分成左右两个部分，分别放入两个容器：

<div class="main">
  <div class="container">
    <svg viewBox="0 0 575 604" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_left)">
        <g clip-path="url(#clip1_left)">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4.02944 0 0 4.02945 0 9.00001V595C0 599.971 4.02944 604 9 604H466C470.971 604 475 599.971 475 595V495C475 490.029 479.029 486 484 486H566C570.971 486 575 481.971 575 477V9C575 4.02944 570.971 0 566 0H9Z" fill="#C4C4C4"/>
        </g>
      </g>
      <defs>
        <clipPath id="clip0_left">
          <rect width="575" height="604" fill="white"/>
        </clipPath>
        <clipPath id="clip1_left">
          <rect width="575" height="604" fill="white"/>
        </clipPath>
      </defs>
    </svg>
  </div>
  <div class="container">
    <svg viewBox="0 0 575 604" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4.02944 0 0 4.02945 0 9.00001V477C0 481.971 4.02944 486 9 486H91C95.9706 486 100 490.029 100 495V595C100 599.971 95.9706 604 91 604H566C570.971 604 575 599.971 575 595V9C575 4.02944 570.971 0 566 0H9Z" fill="#C4C4C4"/>
    </svg>
  </div>
</div>

3. 调整SVG容器样式，确保自适应

去掉容器的固定max-width，让它随布局自适应，同时保持SVG的宽高比：

.container {
  width: 100%;
  height: auto;
}
.container svg {
  display: block;
  width: 100%;
  height: auto; /* 保持SVG原始比例 */
}

效果说明 #

这样修改后，浏览器缩放时：

• 两列会始终等比例缩放，宽度保持一致
• 中间的凹口因为是SVG绘制的，会跟着整体比例同步变化，不会变形
• 左边的SVG保留了原本的结构，完全支持添加交互元素（比如点击事件）

如果你之前试过CSS Mask没成功，大概率是因为Mask的图片用了PNG，换成SVG Mask会更稳定，但上面的方案更直接，不用额外处理Mask逻辑。

备注：内容来源于stack exchange，提问作者Devmatt