图片上下左右自适应对齐

想要实现的效果：

1、父盒子固定宽高

2、父盒子里的图片，宽度比高度大，那么宽度铺满，高度上下自适应居中。

3、父盒子里的图片，高度比宽度大，那么高度铺满，宽度左右自适应居中。

效果图：

准备贴代码，代码里的图片是我随便找的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            display: table-cell;
            vertical-align: middle;
            background:red;
            text-align: center;
        }
        .box img, .box2 img{
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
        }

        .box2{
            width: 100px;
            height: 170px;
            display: table-cell;
            vertical-align: middle;
            background:red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="http://img.zhefengle.com/1224e904cd3d0a637ff4c12c487178b2.jpg?imageView2/2/w/300/interlace/1/q/93/format/jpeg\" alt="">
    </div>
    <br>
    <br>
    <br>
    <div class="box2">
        <img src="http://img.zhefengle.com/98382fb3d59547c49f8157848d1e1a33.jpg?imageView2/2/w/300/interlace/1/q/93/format/jpeg" alt="">
    </div>
</body>
</html>

 

posted @ 2017-10-17 22:11  灬安  阅读(810)  评论(0)  编辑  收藏  举报