zoukankan      html  css  js  c++  java
  • 图片自适应div比例缩放上下左右居中

    最近在做网站,发现网上有很多这方面的答案和代码,但是要兼容浏览器,很多都不全,整理了下我的代码,希望对别人有所帮助。

    <div class="wgImg">
    <a href="#"><img src="images/54.jpg" /></a>
    </div>

    css代码:

    /*图片自适应居中*/
    .wgImg{88px; height:124px; line-height:124px; border:2px solid #fff; overflow:hidden;text-align:center;display:table; }
    .wgImg a{display:table-cell;vertical-align:middle;88px;height:124px;}
    .wgImg a img{ 88px; display: inline-block; vertical-align: middle; height: auto;
    max- 100%;
    }

    /*For IE6 */
    *html .wgImg a{position:absolute;top:50%;100%;text-align:center;height:auto;display:block;}
    *html .wgImg a img{position:relative;top:-50%;left:-50%;expression(this.width>88?"84px":"auto");height:expression(this.height>124?"124px":"auto");}
    /*=================*/

    由于本人电脑上没有ie6,在ie6上没有测试不知道可行不,其他浏览器都ok。

  • 相关阅读:
    C++ 11 :override 关键字的使用
    vsphere部署说明
    Windows 下部署Subversion
    Centos 7 最小化部署zabbix
    在vmware中安装mac os
    如何将OS dmg文件制作成U盘启动
    HDU1518(dfs)java/ c++
    HDU1010(bfs)
    HDU1495(bfs)
    HD1285(拓扑排序)
  • 原文地址:https://www.cnblogs.com/MandyLee/p/3638135.html
Copyright © 2011-2022 走看看