CSS：将两张图片按比例缩放到屏幕

Question

这是问题所在：

我有两张图片要叠加在一起。此外，我希望两个图像都按屏幕高度和宽度按比例缩放。上面的图片既不应该失去它的位置也不应该缩放到下面的图片。使两张图看起来永远像一张图

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

Answer 1

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

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

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

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

CSS：将两张图片按比例缩放到屏幕

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

html

css

scaling

image