一种用css实现图片在父框中等比缩放并垂直居中的办法

一个网页中往往会有很多图片，而网站的编辑上传图片时可能并不一定按照为父框设定的那个宽高来传，这样图片往往会将父框撑开或者被父框截断。一种比较好的解决的办法是这样的：

 

HTML代码结构：

 <div class="dimg">
     <i class="posI"></i>
     <img width="125" height="160" alt="宝格丽全新珠宝腕表" src="http://img0.pclady.com.cn/pclady/watch/news/1411/29.jpg">
 </div>

 

CSS：

    /*父框样式*/
    .dimg {
        width: 125px;
        height: 160px;
        text-align: center;
    }
 
    /*辅助元素样式*/
    i.posI {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        width: 0;
    }

    /*图片样式*/
    .dimg img {
        vertical-align: middle;
        max-width: 125px;
        max-height: 160px;
        _width: expression(document.body.clientWidth > 125 ? "125px" : "auto");
        _height: expression(this.scrollHeight > 160 ? "160px" : "auto");
    }

 

这个办法的缺点是需要增加一个无意义的辅助元素i，还要用到expression来为IE6模拟max-width和maxheight，只能视情况而用。

 

 

 

实现的效果如下：

 

当网站编辑放的是与父框宽高相等的图片时：

 

 

 

当网站编辑放的是缩小5倍的小图时：