jQuery plugin photo center

        สำหรับจัดภาพ ให้อยู่กึ่งกลางของ  parent tag <img/> ไม่ว่าภาพจะมีขนาดเท่าใดก็ตาม และ parent tag จะมีรูปทรง 4 เหลี่ยมขนาดเท่าใดก็ตาม ภาพจะถูกจัดให้อยู่กึ่งกลางเสมอ (ตามอัตราส่วน parent)

example

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="photoCenter.js"></script>

<div style="width : 100px; height : 100px;" class="image-wrapper">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauYZ-KocyUM4eUkQe8xu6DX_Js0QJWcsuszNPJ1jRobZjOg76LoZF-fHkQN1pZJ4TlGUD2VRWjpgucIxFZzn8oGZN6mprLB8NdTf0AAPa40z8ohWb33Uz1ReFj1i15XYegfZ6Qm7-EHdw/s1600/background-tree.jpg"/>
</div>

<div style="width : 100px; height : 400px;" class="image-wrapper">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauYZ-KocyUM4eUkQe8xu6DX_Js0QJWcsuszNPJ1jRobZjOg76LoZF-fHkQN1pZJ4TlGUD2VRWjpgucIxFZzn8oGZN6mprLB8NdTf0AAPa40z8ohWb33Uz1ReFj1i15XYegfZ6Qm7-EHdw/s1600/background-tree.jpg"/>
</div>

<div style="width : 300px; height : 200px;" class="image-wrapper">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauYZ-KocyUM4eUkQe8xu6DX_Js0QJWcsuszNPJ1jRobZjOg76LoZF-fHkQN1pZJ4TlGUD2VRWjpgucIxFZzn8oGZN6mprLB8NdTf0AAPa40z8ohWb33Uz1ReFj1i15XYegfZ6Qm7-EHdw/s1600/background-tree.jpg"/>
</div>

<div style="width : 500px; height : 100px;" class="image-wrapper">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjauYZ-KocyUM4eUkQe8xu6DX_Js0QJWcsuszNPJ1jRobZjOg76LoZF-fHkQN1pZJ4TlGUD2VRWjpgucIxFZzn8oGZN6mprLB8NdTf0AAPa40z8ohWb33Uz1ReFj1i15XYegfZ6Qm7-EHdw/s1600/background-tree.jpg"/>
</div>

<style type="text/css">
    .image-wrapper{
        margin : 20px;
        display : inline-block; 
    }
</style>

<script type="text/javascript">
    (function($) {
        $(function() {
            $('.image-wrapper img').photoCenter();
        });
    })(jQuery);
</script>

photoCenter.js

/**
 * @author jittagorn pitakmetagoon
 * create 2/05/2014
 * source http://na5cent.blogspot.com/2014/05/jquery-plugin-photo-center.html
 */
;(function($) {

    function percentScale(image) {
        var percent = {
            width: image.new.width / image.old.width,
            height: image.new.height / image.old.height
        };

        if (image.new.height === 0) {
            image.new.height = percent.width * image.old.height;
        }

        if (image.new.width === 0) {
            image.new.width = percent.height * image.old.width;
        }
    }

    function spaceScale(image) {
        var space = {
            width: image.parent.width - image.old.width,
            height: image.parent.height - image.old.height
        };

        if (space.width > 0) {
            image.new.height = 0;
            image.new.width = image.parent.width;
        }

        if (space.height > 0) {
            image.new.width = 0;
            image.new.height = image.parent.height;
        }
    }

    function computeScale(image) {
        //1. to standard (ratio) scale
        percentScale(image);

        //2. compute new scale 
        image.old.width = image.new.width;
        image.old.height = image.new.height;

        spaceScale(image);
        percentScale(image);
    }

    function setScale(image) {
        image.$parent.css('overflow', 'hidden');
        image.$image.attr('width', parseInt(image.new.width));
        image.$image.attr('height', parseInt(image.new.height));
        image.$image.css({
            'margin-top': toCenter(image.new.height - image.parent.height) + 'px',
            'margin-left': toCenter(image.new.width - image.parent.width) + 'px'
        });
    }

    function toCenter(val) {
        return parseInt(-1 * val / 2);
    }

    $.fn.photoCenter = function() {

        return this.each(function() {
            var $image = $(this);
            var $parent = $image.parent();

            var image = {
                $image: $image,
                $parent: $parent,
                old: {
                    width: $image.width(),
                    height: $image.height()
                },
                new : {
                    width: $parent.width(),
                    height: 0
                },
                parent: {
                    width: $parent.width(),
                    height: $parent.height()
                }
            };

            computeScale(image);
            setScale(image);
        });
    };
})(jQuery);