img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<style>
    .item{
        width:600px;
        height:500px;
        float:left;
        background-color:black;
    }
    body:after{
        content:"";
        display:block;
        clear:both;
    }
</style>
</head>
<body>
<div class="item"><img src="img/720x480.jpg" /></div>
<div class="item"><img src="img/snack.jpg" /></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
    $(function () {
        /*
           定义jQuery插件 imageSize
           使用方式
           $("容器").imageSize("contain") 或 $("容器").imageSize("cover")
        */
        $.fn.imageSize = function (type) {
            this.each(function () {
                var This = $(this),
                    $img = This.find(">img"),
                    box_width = This.width(),
                    box_height = This.height();
                getRealImageSize($img.attr("src"), function (w, h) {
                    if (type == "contain") {//跟background-size:contain一样效果
                        if (box_width / box_height <= w / h) {
                            $img.css({ width: "100%", height: "auto", paddingTop: ((box_height - box_width * h / w) / 2) + "px" });
                        }
                        else {
                            $img.css({ height: "100%", width: "auto", paddingLeft: ((box_width - box_height * w / h) / 2) + "px" });
                        }
                    } else if (type == "cover") {//跟background-size:cover一样效果
                        This.css("overflow", "hidden");
                        if (box_width / box_height <= w / h) {
                            $img.css({ width: "auto", height: "100%" });
                        }
                        else {
                            $img.css({ height: "auto", width: "100%" });
                        }
                    } else {//无效果
                        This.css("overflow", "hidden");
                    }
                });
            });
            //引用自http://www.zhihu.com/question/28733200
            function getRealImageSize(url, callback) {
                var img = new Image();
                img.src = url;

                // 如果图片被缓存，则直接返回缓存数据
                if (img.complete) {
                    callback(img.width, img.height);
                } else {
                    // 完全加载完毕的事件
                    img.onload = function () {
                        callback(img.width, img.height);
                    }
                }

            }
        };


        /*
        开始调用插件
        */
        $(".item").imageSize("contain");
    });
</script>
</body>
</html>