Scale & Align Images To Fit Their Parent Containers - Image Scale

Image Scale is a useful yet easy jQuery plugin that automatically scales(enlarge/shrink/crop) and aligns your image to fit within its parent container with many scale and alignment options.

Similar to the CSS object-fit Property but works well across all modern and legacy browsers.

How to use it:

1. Include jQuery javascript library and jQuery image scale plugin on the web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="image-scale.js"></script>

2. Insert an image into your container. Using data-* attributes to set the image scale and alignment options

<div class="demo">
  <img class="scale" data-scale="fill" data-align="center" src="1.jpg">
</div>

3. Scale options.

• fill - stretches or compresses the source image to fill the target frame
• best-fill - fits the shortest side of the source image within the target frame while maintaining the original aspect ratio
• best-fit - fits the longest edge of the source image within the target frame while maintaining the original aspect ratio
• best-fit-down - same as best-fit but will not stretch the source if it is smaller than the target
• none - the source image is left unscaled

4. Alignment options.

• left
• right
• center
• top
• bottom
• top-left
• top-right
• bottom-left
• bottom-right

5. Call the plugin on the target image and done.

$(function() {
  $("img.scale").imageScale();
});

6. You can also customize the scale & align in the JavaScript:

$("img.scale").imageScale({
  scale: 'best-fill',
  align: 'center'
});

7. Possible plugin options with default values.

$("img.scale").imageScale({

  /**
    A jQuery Object against which the image size will be calculated.
    If null, the parent of the image will be used.

    @type jQuery Object
    @default null
    @since Version 1.0
  */
  parent: null,

  /**
    A boolean determining if the parent should hide its overflow.

    @type Boolean
    @default true
    @since Version 1.0
  */
  hideParentOverflow: true,

  /**
    A duration in milliseconds determining how long the fadeIn animation will run when your image is scale for the firstTime.

    Set it to 0 if you don't want any animation.

    @type Number|String
    @default 0
    @since Version 1.1
  */
  fadeInDuration: 0,

  /**
    A boolean indicating if the image size should be rescaled when the window is resized.

    The window size is checked using requestAnimationFrame for good performance.

    Example:

        $images.imageScale({ 
          rescaleOnResize: true
        });
    
    @type Boolean
    @default false
    @since Version 1.0
  */
  rescaleOnResize: false,

  /**
    A function that will be call each time the receiver is scaled.

    Example:

        $images.imageScale({
          didScale: function() {
            console.log('did scale img: ', this.element);
          }
        });

    @type Function
    @param firstTime {Boolean} true if the image was scale for the first time.
    @param options {Object} the options passed to the scale method.
    @since Version 2.0
  */
  didScale: function(firstTime, options) {},

  /**
    A number indicating the log level :

    0: silent
    1: error
    2: error & warning
    3: error & warning & notice

    @type Number
    @default 0
    @since Version 1.0
  */
  logLevel: 0

});

---

This awesome jQuery plugin is developed by GestiX. For more Advanced Usages, please check the demo page or visit the official website.