logo标签列表

使用transform SCALE时如何避免CSS溢出

htmlcss
10

在使用 transform: scale(); 时遇到了问题。

基本上，我在一个具有 overflow:hidden 的图像上使用此缩放效果。

请查看此链接以获取实时演示：https://jsfiddle.net/ns3vm3x6/

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); }

如何防止缩放图像时出现溢出？
我的代码有什么问题吗？
提前感谢...
3个回答
5
您需要为设置position: absolute。
img {width:200px; 
height:200px; 
transition:transform 1s linear;
position: absolute; 
}

JSFiddle

感谢Jiiff的回答，我想让图像1按照图像2的比例缩放，而不是反过来。 - Ching Ching
1
我想我明白了，给你的 img 加上 position: absolute，这是你想要的吗？ @ChingChing JSFiddle - Pedram
哇，这真的很酷！但是，如果我有多个图像怎么办？就像这个 https://jsfiddle.net/ns3vm3x6/8/ 图像被隐藏了。 - Ching Ching
0

确保您的容器宽度和高度与所需的结果相同。

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>

少（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

0

我得到了答案，我之前也遇到了这个问题，但现在已经解决了

在这里分享一下

将图像位置设置为相对位置，并设置 top: 20px;

img:hover {
       
     position: relative;
     top: 20px;

}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接