Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
jQuery plugin to fit images while keeping the width/height ratio
JavaScript
Branch: master

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

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.