html - 使用变换 SCALE 时 CSS 防止溢出

Question

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

基本上，我在具有 overflow:hidden

的图像上使用此比例

查看此 fiddle 以进行实时操作: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); }

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

我的代码有什么问题？

提前致谢...

Answer 1

你需要为img设置position: absolute

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

JSFiddle