编写响应式 CSS 时如何保持元素之间的空间相同？

Question

晚上好。 我有三个 SVG 文件，包括 2 个袖子和一个衬衫身。

Shirt Layout with CSS-Grid

Desired Result

对于 CSS-Grid 尝试，每个 SVG 文件都放置在一个 div 元素中，第二张图片显示了下面发布的 HTML。问题是元素随着屏幕尺寸的增加而彼此远离，或者靠得太近而最终重叠。like this我尝试使用 CSS Grid 来定位元素，效果很好但不能解决我的问题问题，因为我无法为网格设置负间隙或边距。我尝试过使用 % 以及 vw 和 vh，绝对和相对定位，但目前无法使其适用于所有分辨率。

.containerShirt {
  background-color: white;
  width: 100vw;
  height: 400px;
  position: relative;
  border: 1px solid black;
}

.shirtLeft {
  position: relative;
  height: 13%;
  left: 26.9%;
  bottom: 15vh;
  /* border: 1px solid black; */
  z-index: 2;
  /* border: 1px solid black; */
}

.shirtBody {
  position: relative;
  height: 40%;
  width: 35%;
  left: 13%;
  /* border: 1px solid black; */
  z-index: 1;
  /* border: 1px solid black; */
}

.shirtRight {
  position: relative;
  bottom: 24%;
  height: 13%;
  right: 1%;
  bottom: 15vh;
  /* border: 1px solid black; */
  z-index: 1;
  /* border: 1px solid black; */
}

<div class="containerShirt">
  <svg class="shirtLeft"> ..... </svg>
  <svg class="shirtBody"> ..... </svg>
  <svg class="shirtRight">..... </svg>
</div>

关于我能做什么的任何想法？非常感谢。

Answer 1

了解一下， 或者使用 min-width/ min-height

https://www.freecodecamp.org/news/learn-responsive-web-design-in-5-minutes/