Question

使用transform: scale();

时遇到问题

基本上，我在具有overflow:hidden

的图像上使用此比例

HTML

<div id="container1">
  <img src="http://lorempixel.com/400/200">
</div>
<p> i want this image to scale just like #example no. 2. how to achive this one? </p>
<br><br>
<div id="container2">
  <img src="http://lorempixel.com/400/200">
</div>

CSS

#container1 {width:100%; height:200px; border:2px solid red;
 overflow-x:scroll; overflow-y:hidden; white-space:no-wrap; }

#container2 {width:100%; height:200px; border:2px solid red; white- space:no-wrap;  }
img {width:200px; height:200px; transition:transform 1s linear; }
img:hover {transform:scale(2); }

缩放图像时如何防止溢出？

我的代码出了什么问题？

提前感谢...

Answer 1

您需要为position: absolute

设置img

img {width:200px; 
height:200px; 
transition:transform 1s linear;
position: absolute; 
}

JSFiddle

Answer 2

确保您的容器的宽度和高度符合您的预期结果。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <div class="wrap">
    <div class="bg agent-1"></div>
  </div>
</body>
</html>

less（css）

    @keyframes fade-in {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(2);
      }
    }
    .agent-1 {
      animation: fade-in cubic-bezier(0.0, 0.0, 0.2, 1) 10s forwards;
    }

    .bg {
      width: 100%;
      height: 100%;
      background-image: url(https://images.unsplash.com/photo-1498811107811-a20a5be82dc1?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=01f6b00c3415f756949a44aadb54567e);
      background-size: cover;
      background-position: center;
    }

    .wrap {
      width: 300px;
      height: 300px;
      overflow: hidden;
    }

演示：https://jsbin.com/bavutanixu/edit?html,css,output

使用转换SCALE时CSS防止溢出

2 个答案: