技术文章分类(180)

技术随笔(11)

div居中各种尺寸的image

1、代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>title</title>
<style>
    body{
        font-family:"微软雅黑";
        font-size:12px;
    }
    .dishImg{
        width:154px;height:100px;text-align:center;margin:10px 0 0 20px;border:1px solid #ccc;padding-right:4px; 
    }
    .helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    .dishImg img{
        border-radius:2px;
        vertical-align:middle;max-width:150px;max-height:100px;
    }
</style>
</head>
<body>
    <div class="dishImg">
        <span class="helper"></span>
        <img src="images/test1.png" />
    </div>
    <div class="dishImg">
        <span class="helper"></span>
        <img src="images/test2.jpg" />
    </div>
    <div class="dishImg">
        <span class="helper"></span>
        <img src="images/test3.png" />
    </div>
    <div class="dishImg">
        <span class="helper"></span>
        <img src="images/test1.png" />
    </div>
    <div class="dishImg">
        <span class="helper"></span>
        <img src="images/test2.jpg" />
    </div>
    <div class="dishImg">
        <span class="helper"></span>
        <img src="images/test3.png" />
    </div>
</body>

</html>

2、效果：

3、分析：

　　无论你上传什么尺寸的图片，都能居中对齐。

　　注意：   设置:font-family:"微软雅黑";font-size:12px;

　　　　　　height,width可以自定义,max-width=width-4   ;max-height=height

　　　　　　dishImg 要设置：text-align:center;

　　　　　　增的span很有用

　

 

方法二（css3的一个属性）：

background-size:contain;

 

posted @ 2014-04-09 12:10  坤哥MartinLi  阅读(345)  评论(0)  编辑  收藏  举报