ie中的居中缩放

Posted LikWin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

　　

以上是关于ie中的居中缩放的主要内容，如果未能解决你的问题，请参考以下文章

自动缩放和自动居中显示窗口中的所有标记

片段中的布局不居中

使用 JavaFX 缩放窗口时自动将程序内容居中

是否可以使用 AndroidX 导航将片段中的操作栏标题居中？

在 UIImageView 内的 UIImage 上缩放和居中

transform的妙用---实现div不定宽高垂直水平居中