Question

我的图像在悬停时被放大，但我希望它保持在原始高度和宽度之内。我尝试过设置overflow：none，但它仍然比变换后的原始大小大。

＆＃13;

<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">

＆＃13;

Answer 1

这是working jsfiddle。

如果将图像包装在具有overflow:hidden属性的div中，然后缩放该div中的图像，它将获得您要查找的结果。

您正在执行此操作，overflow:hidden属性正在应用于图像本身。当您将图像放大时，您只需将图像放大。隐藏没有溢出。将图像约束在固定大小的div中然后缩放内部图像会隐藏div的溢出（图像的边缘）

Answer 2

使用div容器并将图像放入其中并溢出：隐藏;

demo here

<div class="img-xon">
<img class="image" src="http://image.tmdb.org/t/p/w185/l2u1MDnR89ptsKZDxIF4LFTiBWP.jpg" />
</div>

.img-xon{
height:278;
width:185;
overflow:hidden;
}
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;
}

img.image:hover {
overflow:hidden;
height:278;
width:185;
}

Answer 3

看看这个结果。 link

你需要使用block for overflow：hidden

CSS溢出不适用于转换

3 个答案: