jQuery Image Scale

Download

Demo

The full size of this image is really 1024 x 768

HTML


                        <div class="non-immediate-parent-container">
                        

                          <a href="http://imgscale.kjmeath.com/pokemon.jpg" class="field-anchor">
                        

                            <img width="1024" height="768" class="pokemon" alt="" src="http://imgscale.kjmeath.com/pokemon.jpg" />
                        

                          </a>
                        

                        </div>

CSS


                        .non-immediate-parent-container{
                        

                          height: 200px;
                        

                          width: 300px;
                        

                        }

JavaScript


                        $(document).ready(function(){
                        

                          $('img.pokemon').imgscale({
                        

                            parent : '.non-immediate-parent-container',
                        

                            fade : 1000
                        

                          });
                        

                        });

Description Automatically scales images to fit or fill their parent container.

Notes The defined parent container of the image must have a defined height and width in CSS.

Basic usage


                    $('img').imgscale();

Parameters parent

Allowed values: css selector string
Description: The parent container the image needs to scale into. This parent must have a defined height and width in CSS. It is recommended that the parent container's CSS property 'display' is set to 'block'. Non-immediate parent selectors ARE allowed (as long as they have a defined height and width).
Default: The image's immediate parent

scale

Allowed values: 'fit' or 'fill'
Description: When set to 'fit', the image will scale to fit inside it's parent container's bounds. When set to 'fill', the image will fill it's parent container's bounds.
Default: 'fill'

center

Allowed values: true or false
Description: The image will automatically center itself if the scale parameter is set to 'fill'. Set to false to disable this feature.
Default: true

fade

Allowed values: Time in milliseconds (Example: 1000 for 1 second)
Description: When set, images that are not already cached by the browser will load hidden, then fade in.
Default: 0 (Disabled)