单个方框内图片垂直水平居中和等比例缩小（支持所有浏览器）

　　我们公司站点是展示类站点，用户会上传不同比例、大小的图片。展示时需要将图片统一尺寸且不拉伸居中展示（比如在100*100的div中垂直居中和水平居中）。

　　水平居中很简单，text-align: center即可，但垂直居中比较麻烦vertical-align: middle可不一定有效。网上在这方面的方法有很多，多的我就不说了，下面是自己的一个汇总方案（包括IE下的图片等比例缩小）：

　　下面具体分析：

  1. 在不考虑IE6的情况下可以使用的方案是line-height
    ?
    div { width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 0; }
        div img { max-height: 100px; max-width: 100px; vertical-align: middle; }

    这个可以实现图片水平和垂直居中，加个font-size: 0是防止在IE下div可能被撑高的可能。

  2. IE6对于line-height方案是无效的，且不支持max-width和max-height所以使用CSS等比例缩小图片是不可能的了，但可以配合脚本实现。先说IE的垂直居中，如果图片不大于外框时可以使用怪诞以毒攻毒的方式writing-mode: tb-rl，这个表示文本输出方式是从上到下从右到左
    ?
    div span { _height: 100%; _writing-mode: tb-rl; }

    height:100%是必须的。

    当图片宽或高大于外框尺寸时我们可以通过脚本的等比例缩小同时实现垂直居中而不使用margin或padding等

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    function scaleImage(img, maxWidth, maxHeight)
    {
        //maxWidth和maxHeight可省，增加这两个参数用于当更改图片尺寸时的垂直居中
        img.style.maxWidth = maxWidth || img.width;
        img.style.maxHeight = maxHeight || img.height;
        //hasLoadFunc参数用于限制图片只有一个用于垂直居中的调整方法
        if (!img.hasLoadFunc)
        {
            img.hasLoadFunc = true;
            //如果图片更改了SRC后再次等比例缩小图片
            img.attachEvent("onload", function ()
            {
                var t = new Image();
                //在不更改图片样式的情况下获得图片的真实尺寸
                t.onload = function ()
                {
                    //将图片宽和高设置为自动，因为在模式表中已经将图片的宽和高设为固定值了
                    img.style.width = img.style.height = "auto";
                    var maxWidth = parseInt(img.style.maxWidth);
                    var maxHeight = parseFloat(img.style.maxHeight);
                    if (this.width > parseInt(img.style.maxWidth) || this.height > maxHeight)
                        //如果图片的宽高比比外框的宽高比大（或者说图片更长些）的时候，宽为固定值，高为自动，否则相反
                        if (this.width / this.height > maxWidth / maxHeight)
                            img.style.width = "";
                        else
                            img.style.height = "";
                }
                t.src = img.src;
            });
        }
        //图片已经加载成功时触发load事件
        img.src = img.src;
    }

    CSS表达式加脚本

    ?
    div span img { _height: 100px; _width: 100px; _zoom: expression((function (img) { img.style.zoom = "1"; scaleImage(img); })(this)); }

    加个宽和高是防止图片加载完后将外框撑开

    ?
    _zoom: expression((function (img) { img.style.zoom = "1"; scaleImage(img); })(this))

    这种写法的css expression只会执行一次，用于css expression优化性能。

　　当然span也可以换成a，div换成li等。当然具体情况具体分析，没有一成不变的代码

posted @   彭伟  阅读(2313)  评论(2)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示