Images randomly placed and resized within wrapper

I've a wrapper that takes the 100% of the page, and within the wrapper a set of some images (now they are 5, but they'll eventually become 10 or more) which I'd like to randomly place and resize so to fit the wrapper.

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

I'm very much a newbie to coding, so I'm sorry if I am not providing much JS scripts, but of the ones I found none could work. I got to randomly place 1 element out of all of those..and that's it!

The other problem is indeed trying to calculate the full size of the window and making sure that the resizing of all the images can be accordingly, so to not have them overlapping, getting too big/small etc..

I hope I've explained somehow what I'd like to achieve..I've tried to be as clear as possible so to help you with understanding my goal :)

Thanks very much in advance for your time!