Javascript 如何将图像放入另一个图像中

我有一个空白的白色图像1，其大小由CSS指定，我想在其中放置另一个没有样式的图像2。所以我的问题是，当第二个图像比image1小或大时，我想我的问题是如何调整image2使其与image1完全匹配

如果可能的话，我应该使用CSS或JavaScription

感谢您的帮助。

请使用最大宽度和最大高度，并将其包装在一个div中！在我的例子中，无论大小，第一，子对象小于父对象，第二，子对象大于父对象，两者都相应地适合。它是纯CSS的

<style type="text/css"> 
.imgA1 { position:absolute; z-index: 1; } 
.imgB1 { position:absolute; z-index: 3; } 
</style>

<img class=imgA1 src="imageA.jpg">
<img class=imgB1 src="imageB.jpg"> 

img{最大宽度：100%；最大高度：100%；显示：块；} .parent、.child{位置：绝对；} p1{宽度：350px；高度：150px；左侧：0；顶部：0；} c1{宽度：350px；高度：150px；左侧：0；顶部：0；} p2{宽度：350px；高度：150px；左侧：0；顶部：200px；} c2{宽度：350px；高度：150px；左侧：0；顶部：200px；}

---

将它们都包装在一个容器中，然后给它们两个宽度：inherit；身高：继承；你试过什么吗？请你的答案解释一下背后的概念。

 <div style="position: relative; left: 0; top: 0;">
  <img src="a.jpg" style="position: relative; top: 0; left: 0;"/>
  <img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>
</div>