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

Question

I have an empty-white image1 with size specified with CSS and I want to put another image2 inside it which has no styling. So my problem is when the second image is smaller or bigger than image1, I guess my question is how to adjust image2 to fully fit with image1.

I should use CSS or javascript(if possible) only.

Any help appreciated.

Answer 1

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

Answer 2

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

Answer 3

Use max-width and max-height for both and wrap them in a div! In my example, whatever the size, (first, child is smaller than the parent, second, child is larger than the parent), both fit accordingly. And it is in pure CSS.

 img {max-width: 100%; max-height: 100%; display: block;} .parent, .child {position: absolute;} #p1 {width: 350px; height: 150px; left: 0; top: 0;} #c1 {width: 350px; height: 150px; left: 0; top: 0;} #p2 {width: 350px; height: 150px; left: 0; top: 200px;} #c2 {width: 350px; height: 150px; left: 0; top: 200px;}

 <div id="p1" class="parent"><img src="http://placehold.it/350x150" alt=""></div> <div id="c1" class="child"><img src="http://placehold.it/150x150" alt=""></div> <div id="p2" class="parent"><img src="http://placehold.it/350x150" alt=""></div> <div id="c2" class="child"><img src="http://placehold.it/450x450" alt=""></div>