Web app using isotope plugin - repost

I have created a an image gallery web application and im using Isotope Jquery plugin to display the div boxes that contain the images in masonry style. * I have four main sizes for the div containers DIV A - width: 100px ; height: 100px; DIV B - width: 220px; height: 100px; DIV C - width: 340px; height: 210px; DIV D - width: 220px; height: 210px; * The div containers are dynamically generated. * Each div container contains an image when generated from database. * Images are not predefined in terms of width and height, they called randomly in each div container. * IMPORTANT - When the image is loaded into a div, it must fit appropriately in its container, keeping in mind the margins inside div. This applies to all divs A,B,C,and D. * IMPORTANT- The four sides of the margin inside the div container must remain static regardless of the images width and height. * Aspect ratio of the image must be kept into consideration. * If necessary, image stretching can be applied if image width or height does not meet with div containers width or height. * If necessary, image cropping can also be applied appropriately if image width or height does not meet with div containers width or height. Expected advisory: 1- Proper sizes of div containers for a good masonry layout using isotope, keeping in mind the image attached for current masonry layout. 2- positioning image inside div container properly in all scenarios A,B,C,and D with proper margins on all sides of container. Check attached images.