我在使用transform时遇到问题:scale();
基本上,我在具有溢出的图像上使用此缩放:隐藏
检查这个小提琴的实时动作: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); }
缩放图像时如何防止溢出?
我的代码出了什么问题?
提前致谢…
解决方法
你需要为img设置position:absolute
img {width:200px; height:200px; transition:transform 1s linear; position: absolute; }