Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Fit images to the vertical baseline rhythm without distortion.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.md
Octocat-spinner-32 jquery.rhythm.js
README.md

jQuery Rhythm

Fit images to the vertical baseline rhythm without distortion.

We find the height of every image and the nearest baseline. We replace the image with a <div/> whose background image is the original image, and whose height is rounded up or down to the nearest baseline.

Inspired by Geoffrey Grosenbach who in turn was apparently inspired by Andy Clarke.

Usage

Here's the simplest example:

$(window).load(function() {
  $('img').rhythm();
});

The window.load event fires when all binary elements in the page, such as images, have downloaded. This is usually after document.ready fires. We need to wait until the images are fully downloaded before reading their dimensions and setting them as background images, otherwise we can end up with artefacts of partial images.

Custom Options

You can use these options:

  • verticalAlign: how to align the image when it is set as a background (defaults is 'top').

You can either pass these options on a case by case basis in each call to rhythm or you can set the defaults once like this:

$.fn.rhythm.defaults.verticalAlign = 'center';

Requirements

  • jQuery (only tested on 1.3.2 but probably works on earlier versions).

Intellectual Property

Copyright 2009 Andrew Stewart, AirBlade Software Ltd. Released under the MIT Licence.

Feedback welcome!

Something went wrong with that request. Please try again.