zoukankan      html  css  js  c++  java
  • 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;

  • 相关阅读:
    go 字符串转换
    GRU模型结构
    ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解
    H5可视化编辑器(H5 Dooring)
    (转)如何防止Axios对我的请求参数进行编码?
    vue使用element-ui,如何给Label加标签
    vue中$router.push打开新窗口
    (转)webstorm配置svn
    打开gitee.com网站报错
    监控$route无效
  • 原文地址:https://www.cnblogs.com/jason819/p/2771571.html
Copyright © 2011-2022 走看看