如何实现桌面端响应式布局，让Hero区图形宽高完美对齐？

问题说明 #

为客户开发Hero区域，要求Hero高度为100vh减去头部高度（该逻辑已通过JS实现），但区域内的3个SVG图形始终无法在宽高上完美对齐。尝试过Grid、Flexbox及绝对定位方案，均未达到设计稿预期效果。

当前代码 #

CSS代码 #

#vormen {
  display: flex;
  align-items: flex-start;
  height: 100vh;
}

#vormen .shape_group {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

#vormen .shape_group svg {
  width: 50%;
  max-height: 50%;
}

#vormen #image_container {
  width: 100%;
  height: 100%;
}

#vormen #image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

HTML代码 #

<div class="fl-html" id="vormen">
  <div id="shapes_1" class="shape_group">
    <svg xmlns="http://www.w3.org/2000/svg" width="471.875" height="471.875" viewBox="0 0 471.875 471.875" id="shape_1">
        <path id="Path_6" data-name="Path 6" d="M0,0,471.875,471.875V0Z" fill="#56c385"/>
      </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="471.214" height="471.214" viewBox="0 0 471.214 471.214" id="shape_2">
          <path id="Path_2" data-name="Path 2" d="M148.612,0,85.48,80.105,22.349,0,7.729,100.94-87,63.132l37.81,94.727-100.942,14.618,80.107,63.132-80.107,63.13,100.942,14.62L-87,408.085l94.725-37.81,14.62,100.94L85.48,391.107l63.132,80.107,14.62-100.94,94.725,37.81-37.808-94.727,100.938-14.62-80.105-63.13,80.105-63.132L220.149,157.859l37.808-94.727L163.232,100.94Z" transform="translate(150.128)" fill="#56c385"/>
      </svg>
    <svg xmlns="http://www.w3.org/2000/svg" width="471.216" height="464.556" viewBox="0 0 471.216 464.556" id="shape_3">
          <g id="Group_225" data-name="Group 225" transform="translate(-468.98 -468.853)">
              <path id="Path_3" data-name="Path 3" d="M117.206,0C-12.915,0-118.4,52-118.4,116.138s105.487,116.14,235.608,116.14,235.608-52,235.608-116.14S247.328,0,117.206,0" transform="translate(587.382 701.131)" fill="#56c385"/>
              <path id="Path_4" data-name="Path 4" d="M117.206,0C-12.915,0-118.4,52-118.4,116.138s105.487,116.14,235.608,116.14,235.608-52,235.608-116.14S247.328,0,117.206,0" transform="translate(587.382 468.853)" fill="#56c385"/>
          </g>
      </svg>
  </div>
  <div id="image_container">
    <img src="https://image.shutterstock.com/image-illustration/modern-interior-server-room-data-600w-1717870396.jpg">
  </div>
</div>

效果对比 #

当前实现效果 #

设计稿效果 #

解决方案 #

核心问题分析 #

1. 三个SVG本身的viewBox宽高比存在细微差异，直接按百分比缩放会导致边缘对齐偏差
2. Flex布局的flex-wrap无法强制单元格保持统一的宽高尺寸
3. SVG未设置统一的缩放对齐规则，导致元素偏移

修改后CSS代码 #

/* 定义头部高度变量，替代JS计算（需根据实际头部高度调整） */
:root {
  --header-height: 80px;
}

#vormen {
  display: flex;
  /* 用CSS计算Hero高度，替代JS逻辑更简洁可靠 */
  height: calc(100vh - var(--header-height));
}

#vormen .shape_group {
  /* 改用Grid布局，强制两行两列的网格结构 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 50%; /* 和图片容器平分宽度，匹配设计稿 */
}

#vormen .shape_group svg {
  width: 100%;
  height: 100%;
  /* 保持SVG比例同时填充整个单元格，避免拉伸变形 */
  object-fit: cover;
  /* 消除SVG默认inline元素的底部间距 */
  display: block;
}

/* 让第三个SVG占满第二行整列，匹配设计稿布局 */
#vormen .shape_group #shape_3 {
  grid-column: 1 / -1;
}

#vormen #image_container {
  width: 50%;
  height: 100%;
}

#vormen #image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

关键调整说明 #

• Grid布局替代Flex：通过grid-template-columns和grid-template-rows强制每个单元格尺寸完全一致，从根源解决对齐问题
• 统一SVG缩放规则：object-fit: cover确保SVG在填充单元格时保持自身比例，同时边缘对齐容器
• 简化Hero高度计算：用CSS变量+calc()替代JS逻辑，更符合前端开发规范，减少脚本依赖
• 匹配设计稿布局：通过grid-column:1/-1让第三个SVG占据整行，和设计稿结构完全一致

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