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

最新推荐文章于 2024-07-19 15:13:24 发布

wsfeiyuan

最新推荐文章于 2024-07-19 15:13:24 发布

阅读量98

点赞数

分类专栏： html 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/wsfeiyuan/article/details/84158392

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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

wsfeiyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享图片垂直居中，图片等比例缩放的方法

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫