CSS实现鼠标滑过图片放大,外部盒子不变

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<style>

  .box {

    /* height: 20%; */

    width:20%;

    border: 10px solid red;

    margin: 100px auto;

    /* 设置overflow: hidden 当放大的时候超出部分隐藏 */

    overflow: hidden;

  }

  .box img {

    display: inline-block;

    height: 100%;

    width: 100%;

    cursor: pointer;

    transition: all .6s;

  }

  .box img:hover {

    transform: scale(1.2);

  }

</style>

<body>

  <div class="box">

    <img src="data:image/jpeg;base64,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" alt="">

  </div>

</body>

</html>

图片比例放大

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值