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.
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.