Is there a way to ensure that all my randomly positioned images stay within the bounds of their 100% wrap without being cut off? Currently, some images are getting cut off due to the overflow: hidden setting. Also, is it possible to prevent the images from overlapping each other?
Here's a link to a jsfiddle example: http://jsfiddle.net/mdxZL/2/
HTML:
<div id="wrap" style="width: 100%; height: auto; position: absolute; left: 0; top: 0; overflow: hidden;">
<div id="images">
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
</div>
</div>
CSS:
#images
{
left: 0; top: 0;
width: 100%;
}
#images img
{
padding: 10px;
position:relative;
}
jQuery:
$(document).ready(function(){
$("#images img").each(
function(intIndex) {
var l = Math.floor(Math.random() * $("#images").width());
var t = Math.floor(Math.random() * $("#images").height());
// Setting the margin-left and margin-top instead of just positioning the elements absolutely
$(this).css("margin-left", l);
$(this).css("margin-top", t);
}
);
});