Displays correctly images with different sizes inside a responsive div

14 Aug Displays correctly images with different sizes inside a responsive div

Hello guys,

The last days I had to work with a blog and the client asked to show images with different sizes inside a responsive div container and all the blocks are floated so I had to deal with the aspect ratio problems and I had to avoid that the different size images break the main layout so for that reason I have created a demo with the solution that I came up, now you can see that the demo is using different images with different size and looks fine.

I created the following code based on the imagefill.js plugin and I’m also using imageloaded Jquery plugin to listen the callback when all the images are loaded then I show the images in spite of don’t show the change of the size and position after the calculation is completed depending on the with and height of the div container.

so I hope you find useful this example.

Regards.

H.