`

分享图片垂直居中，图片等比例缩放的方法

    博客分类：
  • html
 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta id="robots" content="all" />
<meta name="Description" content="图片垂直居中 图片等比例缩放的方法" />
<meta name="Keywords" content="图片垂直居中" />
<meta id="author" content="土人老徐  http://K.css6.com" />
<meta id="Copyright" content="Copyright 2010-2011 K.css6.com. All Rights Reserved" />
<link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />
<title>分享图片垂直居中，图片等比例缩放的方法 </title>
<style type="text/css" media="screen" rel="stylesheet">
.img_list ul li{ float:left; margin:10px; width:202px; height:202px; overflow:hidden; display:inline;}
.img_list ul li a{ width:200px; height:200px; overflow:hidden; display:table-cell; *display:block; line-height:200px;  font-size:200px; *font-size:175px; text-align:center;border:1px solid #f00; vertical-align:middle; font-family:Arial;}
.img_list ul li img { vertical-align:middle; vertical-align:middle;}
</style>
</head>

<body>
<div class="img_list">
        <ul id="img_list">
                <li>
                        <a href="#">
                                <img src="http://i00.c.aliimg.com/news/upload/5000780/2_1263433563767.jpg" alt="示例图片" />
                        </a>
                </li>
                <li>
                        <a href="#">
                                <img src="http://img.china.alibaba.com/news/upload/5000260/392192_1263174952956.jpg" alt="示例图片" />
                        </a>
                </li>
                <li>
                        <a href="#">
                                <img src="http://i00.c.aliimg.com/news/upload/profile/huodong/guanghuo/03/45_1263268910318.jpg" alt="示例图片" />
                        </a>
                </li>
        </ul>
</div>
<script type="text/javascript">
/*
        * auto resize image
        * @param    img     img obj
        * @param    w       custom width
        * @param    h       custom height
        */
        resizeImage=function(img,w,h) {
            img.removeAttribute('width');
            img.removeAttribute('height');
            var pic;
            if(document.all) {
                var pic=new Image();
                pic.src=img.src;
            } else pic=img;
            //check images exist and width&height >0 and custom width >0
            if(pic&&pic.width&&pic.height&&w) {
                if(!h) h=w;
                if(pic.width>w||pic.height>h) {
                    var scale=pic.width/pic.height,fit=scale>=w/h;
                    if(document.all) img=img.style;
                    img[fit?'width':'height']=fit?w:h;
                    if(document.all) img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
                }
            }
        };
                
window.onload=function(){
        var images=document.getElementById('img_list').getElementsByTagName('img');
        for(var i=0;i<images.length;i++){
                resizeImage(images[i],200);
        }
                
                };
</script>
</body>
</html>

 

 如果你觉得本文介绍的图片垂直居中方法值得收藏，请附上本文的网址，谢谢。

本文出处：http://k.css6.com/?p=41

分享到：
| Oracle修改Oracle的进程数[processes]及会 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics