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;