协调重叠的组件以一起缩放

Question

正在尝试创建一个包含两个一起缩放的组件的高阶组件。

高阶分量是这样设置的：

<>
    <Component 1/>
    <Component 2/>
</>

组件 1 的 css：

{ 
  height: 735px;
  background-image: url(url);
}

对于组件 2：

{
  height: 286px;
  margin: -150px auto 0;
  width: 1305px;
}

这是初始渲染：

这是视口缩小后的渲染图：

分量 1 收缩，而分量 2 留在原位。

有没有办法让它们一起缩放并保持相对位置？

我试过使用 @material-ui 中的 Grid，但没有成功。

我应该考虑在 css 中使用 grid 布局，还是与在 @material-ui 中使用 Grid 相同？

Answer 1

因此，据我了解，您希望组件保持比例，但第二个组件相对于第一个组件保持固定？如果您想采用通常的 CSS 方式，则有一种可能性：

如果您希望内容保持比例但仍然缩放和重叠，您可以使用一些定位技术结合 div 上的百分比值和 flexbox 作为百分比的基础。

我不知道你在组件中放了什么，所以我只使用了带有 object-fit 的图像，所以你需要根据你放在那里的任何东西来调整它。

（您可以忽略 flex 容器上的背景和轮廓，这只是为了让我的眼睛免受一些疲劳；））

如果有帮助请告诉我！

.components {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0;
  margin: 0 auto;
  height: 90vh;
  width: auto;
  background-color: lightgrey;
  outline: 1px solid grey;
}

.c1 {
  height: 70%;
  width: 90%;
  background-image: url(url);
  border: 1px solid red;
  margin: 5vh auto;
  position: absolute;
  top: 0;
}

.c2 {
  height: 30%;
  width: 50%;
  border: 1px solid blue;
  position: fixed;
  top: 55%;
  left: 25%;
  margin: 0 auto;
}

#img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#img2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="components">
  <div class="c1"><img id="img1" src="https://i.imgur.com/Hrbzpp9.jpeg">
    <div class="c2"><img id="img2" src="https://i.imgur.com/8jhZLa1.jpeg"></div>
  </div>
</div>

协调重叠的组件以一起缩放

Coordinate overlapping components to scale together

css

reactjs

material-ui