Coordinate overlapping components to scale together

Question

Attempting to create a higher-order component with two components that scale together.

The higher-order component is set up as so:

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

The css for Component 1:

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

and for Component 2:

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

This is the initial render:

This is the render after viewport is shrunk:

Component 1 shrinks, while Component 2 stays in the position.

Is there a way to have them scale together and maintain relative position?

I've tried using Grid from @material-ui but have had no luck.

Should I look into using grid layout in css, or would it be the same as using Grid from @material-ui?

Answer 1

So, as I understand it you want the components to remain proportional but have the second one remain fixed relative to the first? Here's a possibility if you want to go the usual CSS way:

If you want the content to remain proportional but still scale and overlap, you can use some positioning techniques combined with percentage values on your divs and a flexbox to base the percentages on.

I don't know what you're putting in the components so I just used images with object-fit so you'll need to tailor it to whatever you're putting in there.

(you can ignore the background and outline on the flex container, that's jut to save my eyes some strain ;) )

Let me know if that helps!

.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>