html页面中图片自适应容器大小且上下左右居中插件

概述

 

做了一个通用的图片自适应插件，方便大家使用，下面直接上代码。

插件源码

// jQuery.imgAutoSize.js
// Wangbaifeng - http://donglisoft.com/ - MIT Licensed
(function ($) {

    $.fn.imgAutoSize = function () {
        this.each(function () {
            var pwidth = $(this).width();
            var pheight = $(this).height();
            var _img = $(this).find("img");
            var iwidth = _img.width();
            var iheight = _img.height();

            //alert(pwidth + "-" + pheight + "-" + iwidth + "-" + iheight)

            if (pwidth <= iwidth || pheight <= iheight) {
                if (iwidth / pwidth > iheight / pheight) {
                    alert(pwidth);
                    _img.css("width", pwidth).css("height", pwidth / iwidth * iheight);
                    _img.css("margin-top", (pheight - pwidth / iwidth * iheight) / 2 + "px");
                } else {
                    _img.css("width", pheight / iheight * iwidth).css("height", pheight);
                    _img.css("margin-left", (pwidth - pheight / iheight * iwidth) / 2 + "px");
                }
            } else {
                _img.css("margin-left", (pwidth - iwidth) / 2 + "px");
                _img.css("margin-top", (pheight - iheight) / 2 + "px");
            }
        });
    };

})(jQuery);

 

使用

页面代码：

<div class="mytest">
    <ul>
        <li>
            <img src="Images/green.png" />
        </li>
        <li>
            <img src="Images/login.gif" />
        </li>
    </ul>
</div>

 

函数调用：

    <script type="text/javascript">
        $(function () {
            $('.mytest ul li').imgAutoSize();
        });
    </script>

 

注意事项：

     1、".mytest ul li“是图片的容器

     2、li要定义大小，且要加属性overflow:hidden;

转载于:https://www.cnblogs.com/jason819/archive/2012/11/15/2771571.html