ie中的居中缩放

最新推荐文章于 2022-07-04 18:20:52 发布

Lik1024

最新推荐文章于 2022-07-04 18:20:52 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/github_39365750/article/details/94593479

本文介绍了一种利用HTML和CSS实现图片在不同容器内的精确缩放与定位的方法。通过设置特定的样式属性，可以使得图片在保持原有比例的同时实现居中显示或左上角定位，并且在鼠标悬停时产生平滑的放大效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>