Skip to content
jQuery plugin to fit images while keeping the width/height ratio
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
README
jquery.fitimage.js
sample.html
spacer.gif Initial import Mar 15, 2009

README

jquery.fitimage - jQuery plugin to fit images

You're loading images with unknown width and height, but don't want to
stretch the images with wrong aspect ratio. This plugin swaps the
images with a placeholder to load, preloads the actual image in the
background, calculate the size and assign proper margins to fit the
image with given width and height.

Usage:

  <script src="jquery.fitimage.js"></script>
  <script>
  $(document).ready(function(){
    $('.fit').fitimage({ placeholder: "/uri/to/placeholder.png" });
  });
  </script>
  ...
  <div class="container">
    <img src="http://example.com/test.jpg" class="fit" style="width:200px;height:200px" />
  </div>

For example, if test.jpg's size is 800x600, fitimage() will update the
CSS property of the given img element:

  width:200px;height:150px;margin-top:25px;margin-bottom:25px;

See sample.html for more.
Something went wrong with that request. Please try again.