CSS: scale two images proportionally to each other and to the screen

Question

Here's the problem:

I have two pictures that I want to stack on top of each other. Additionally, I would like both images to scale proportionally to the screen height and width. The above picture should neither lose its position nor its scaling to the picture below. So that both pictures always look like a single picture

I have no idea how to start here. how would you design the css classes of the individual images? I suspect a lot will work via "calc ()" and screen dimensions (100vw / 100vh)?

Answer 1

I don't have images, but I drew two div tags with the colors you had above. You can replace those with the images you want.

Effectively, you make an container overlay and then put the images within that overlay.

You can also change the height to auto as they are images. I needed to use 100% for the div demo.

.outline-box
{  position: relative;
   border: 2px solid Black;
   padding-top: 40%;
}

.pic-container
{  
   position: absolute;
   width: 50%;
   height: 30%;
   
   left: 5%;
   top: 5%;
}

.pic-container .pic1
{  background-color: Gray;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1;
}

.pic-container .pic2
{  background-color: Coral;
   width: 30%;
   height: 20%;
   right: 5%;
   top: 5%;
   position: absolute;
   z-index: 2;
}

<div class="outline-box">
 <div class="pic-container">
  <div class="pic1"></div>
  <div class="pic2"></div>
 </div>
</div>