Not fitting in fixed container

[g5400658]

I'm trying to get my images to fit in a container that's 500px wide and 250px high, but it seems to ignore the constraints and overflows all the images (without resizing them).

Here's the JSFiddle: http://jsfiddle.net/uZv3n/2468/

HTML:

<div class="Collage effect-parent"><img src="http://placehold.it/350x150/69D2E7/ffffff"><img src="http://placehold.it/320x180/A7DBD8/ffffff"><img src="http://placehold.it/320x300/E0E4CC/ffffff"><img src="http://placehold.it/472x500/F38630/ffffff"><img src="http://placehold.it/540x360/FA6900/ffffff"><img src="http://placehold.it/800x600/ECD078/ffffff"><img src="http://placehold.it/400x120/D95B43/ffffff"><img src="http://placehold.it/300x300/C02942/ffffff"><img src="http://placehold.it/320x500/542437/ffffff"><img src="http://placehold.it/450x300/53777A/ffffff"></div>

CSS:

.Collage{
    padding:10px;
    width: 500px;
    height: 250px;
    background: lightgrey;
  }

.Collage img {
    opacity:0;
    box-shadow:0px 3px 4px #dcdcdc;
    border-radius: 6px;
    /* 
    * Change this to try different borders
    */
    border:6px solid #FFF;
}

JS:

$('.Collage').collagePlus();

[haheute]

I don't know if CollagePlus can fit the images into a fixed div height. You could try to use a targetHeight:50 with the CollagePlus() function