我不确定我是否完全理解你的问题，但从我所读到的，我认为你想增加图像，但保持图标之间的差距相同。不管你是否使用flexboxes。您可以在图像 Package 器上添加overflow: hidden，而不是scaling， Package 器会在 Package 器内放大图像。希望这对你有帮助。

:root {
  --bg-color: rgb(20, 20, 20);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}

#icons {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% -20px);
  gap: 70px;
  max-width: 1500px;
  white-space: nowrap
}

.icon {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  height: 150px;
  width: 150px;
  transition: transform 400ms cubic-bezier(.05, .43, .25, .95);
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
  transition: all 0.5s;
}

#icons .icon:hover img {
  transform: scale(1.3);
}

#icons .icon:not(:hover) {
  flex-grow: 1;
}

<div class="group-icon" id="icons">
  <div class="icon">
    <img src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

与其使用transform属性，我认为您需要使用width和height声明特定的维度。

#icons .icon:hover {
  /* transform: scale(1.5); */
  width: 225px;
  height: 225px;
}

您可能还需要为Flexbox容器声明align-items: center。
此外，您的宽度计算无效（因此被忽略），因为在减号-字符之后没有空格。而不是“100%负20像素”，你有“100%负20像素”。然而，“100% -20 px”会引入其他问题，所以我不会在我的回答中使用它。

#icons {
  align-items: center;
  width: calc(100% - 20px);
}

:root {
  --bg-color: rgb(20, 20, 20);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}

#icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: calc(100% -20px); /* invalid */
  gap: 70px;
  max-width: 1500px;
  white-space: nowrap
}

.icon {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  height: 150px;
  width: 150px;
  transition: transform 400ms cubic-bezier(.05, .43, .25, .95);
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

#icons .icon:hover {
  /* transform: scale(1.5); */
  width: 225px;
  height: 225px;
}

#icons .icon:not(:hover) {
  flex-grow: 1;
}

<div class="group-icon" id="icons">
  <div class="icon">
    <img src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>
</div>

问题是transform只在视觉上改变事物，而不是大小。
因此，此代码段更改悬停时的实际宽度和高度并转换它们。
它还将图像向上平移高度差的一半，但如果有多行图像，您必须决定这是否是您想要的效果，因为它不会上下移动行。

:root {
  --bg-color: rgb(20, 20, 20);
}

body {
  align-items: center;
  background-color: var(--bg-color);
  display: flex;
  height: 100vh;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}

#icons {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% -20px);
  gap: 70px;
  max-width: 1500px;
  white-space: nowrap
}

.icon {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  height: 150px;
  width: 150px;
  transition: all 400ms cubic-bezier(.05, .43, .25, .95);
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 20px;
}

#icons .icon:hover {
  Rtransform: scale(1.5);
  width: 225px;
  height: 225px;
  transform: translateY(-37.5px);
}

#icons .icon:not(:hover) {
  flex-grow: 1;
}

<div class="group-icon" id="icons">
  <div class="icon">
    <img src="https://images.pexels.com/photos/2269872/pexels-photo-2269872.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>

  <div class="icon">
    <img src="https://images.pexels.com/photos/2385044/pexels-photo-2385044.jpeg?auto=compress&cs=tinysrgb&w=1600">
  </div>