Question

我有一个空白的image1，其大小由CSS指定，我想在其中放入另一个没有样式的image2。所以我的问题是当第二张图像小于或大于image1时，我想我的问题是如何调整image2以完全适合image1。

我应该只使用CSS或javascript（如果可能）。

任何帮助表示感谢。

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

对两者使用max-width和max-height并将它们包装在div中！在我的例子中，无论大小，（首先，孩子小于父母，第二，孩子大于父母），两者都相应地适合。它是纯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>

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

3 个答案: