ie中的居中缩放

本文介绍了一种利用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>

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值