ie中的居中缩放 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /* 可见视觉区域 */
            width: 480px; height: 250px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        .size {
            /* 广阔的海洋 */
            width: 1000px; height: 1000px;
            position: absolute; left: 50%; top: 50%;
            margin: -500px 0 0 -500px;
            /* 水平居中 */
            text-align: center;
        }
        .zoom {
            /* 缩放的元素 */
            width: 480px; height: 250px;
            vertical-align: middle;
            -webkit-transition: -webkit-transform .2s;
            transition: transform .2s;
        }
        .box:hover .zoom {
            /* hover放大 */
            -webkit-transform: scale(1.05);
            -ms-transform: scale(1.05);
            transform: scale(1.05);
            zoom: 1.05;
        }
        :root .box:hover .zoom {
            zoom: 1;
        }
        .middle {
            /* 垂直居中 */
            display: inline-block;
            width: 0; height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <h4>左上角定位</h4>
    <div class="box">
        <img src="timg.jpg" class="zoom">
    </div>
    <h4>居中定位</h4>
    <div class="box">
        <div class="size">
            <img src="timg.jpg" class="zoom"><i class="middle"></i>
        </div>
    </div>
</body>
</html>

　　

posted @ 2017-09-14 11:38  likwin  阅读(245)  评论(0)  编辑  收藏  举报