Fluid Gallery

An image gallery for people who like to scroll.


Takes a div of images and sets every landscape image too 100% width of it's container and for every portrait image divides that container between it and its next sibling while staggering right to left.

A couple of notes

This plugin uses the width and height attributes of img tags to calculate their new size. I didn't want to mess with checking if images are loaded and that stuff when in most cases I know the dimensions of the image I am serving before it's loaded.


  • margin: integer, spacing around each image, default is 0

Further Developments

  • Wrap images in container element through plugin
  • Add additional css styles through plugin


<div class="gallery">
	<div class="img-container">
		<img src="image.jpg" width="800" height="600">


	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

.img-container img{
	display: block;