图片在包装器中随机放置并调整大小

Question

我有一个包装器，该包装器占据了页面的100％，并且在包装器中有一些图像（现在是5张，但最终将变成10张或更多张），我想将它们随机放置并调整大小以适合包装纸。

<div id="wrapper">
 <img src="images/body/cervello.png" id="image" class="brain" />
 <img src="images/body/chiappe.png" id="image" class="booty" />
 <img src="images/body/cuore.png" id="image" class="heart" />
 <img src="images/body/denti.png" id="image" class="teeth" />
 <img src="images/body/mano.png" id="image" class="hand" />
 <img src="images/body/orecchio.png" id="image" class="ear" />
</div>

body, html {
height: 100%;
}

#wrapper {
height: 100%;
margin: 0px auto;
overflow: hidden;
}

我是编码的新手，因此还无法编写自己的JS。尽管我发现this code on a JSFiddle可以满足我的要求（至少对于放置位置而言，进行调整）。

另一个问题确实是试图计算窗口的完整大小，并确保可以调整所有图像的大小，以免它们重叠，变大或变小。

This几乎是我想要实现的，但是图像而不是气泡。

我希望我已经以某种方式解释了我想要实现的目标。我试图尽可能清楚一些，以帮助您理解我的目标：）

非常感谢您抽出宝贵的时间！