CSS：按比例缩放两个图像并按比例缩放到屏幕[关闭]

Question

问题来了：

我有两张图片要堆叠在一起。 此外，我希望这两个图像都与屏幕高度和宽度成比例。上图既不能丢失位置，也不能缩放到下图。 让两张图片看起来总是一张图片

我不知道如何从这里开始。 您将如何设计单个图像的 css 类？ 我怀疑很多都可以通过“calc ()”和屏幕尺寸（100vw / 100vh）来工作？

Answer 1

我没有图片，但我用你上面的颜色画了两个 div 标签。您可以将它们替换为您想要的图像。

实际上，您制作了一个容器叠加层，然后将图像放入该叠加层中。

您还可以将高度更改为自动，因为它们是图像。我需要 100% 用于 div 演示。

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