Responsive Empty Div - Keeps Aspect Ratio

Uses the technique found here.

Responsive Div - Background Keeps Aspect Ratio

Responsive Div - Background-Size Propogation Test

Responsive Page-Turn Transition

This test only has the webkit CSS3 prefixes.

The gallery requires a couple extra wrapping divs. It also needs to have absolute positioning rather than relative.

In the js, rather than setting the height and width of the gallery we use the technique linked to above to set the aspect ratio:

      // Get image dimensions
      that.height = that.images.first().height();
      that.width = that.images.first().width();
      
      // Make sure the gallery element keeps its aspect ratio when resized
      that.aspectRatio = (that.height / that.width) * 100;
      that.element.closest('.gallery-container').css('paddingBottom', that.aspectRatio + '%');
      
      // Allow sub elements to be absolutely positioned within the gallery
      that.element.css('position', 'absolute');