我的图像在悬停时放大，但是我希望它保持在原始高度和宽度之内。我试过设置overflow：none，但是它仍然大于转换后的原始大小。
<style type="text/css">
img.image {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
height:278;
width:185;
overflow:hidden;
}
img.image:hover {
-webkit-transform:scale(1.1); /* Safari and Chrome */
-moz-transform:scale(1.1); /* Firefox */
-ms-transform:scale(1.1); /* IE 9 */
-o-transform:scale(1.1); /* Opera */
transform:scale(1.1);
overflow:hidden;
height:278;
width:185;
}
</style>
<img class="image" src="http://image.tmdb.org/t/p/w185/l2u1MDnR89ptsKZDxIF4LFTiBWP.jpg">这是一个工作的jsfiddle。
如果使用该overflow:hidden属性将图像包装在div中，然后在该div中缩放图像，则可以达到所需的结果。
在执行此操作时，该overflow:hidden属性已应用于图像本身。放大图像时，只是在放大图像。没有溢出可以隐藏。将图像限制在固定大小的div内，然后在内部缩放图像会隐藏div的溢出（图像的边缘）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句