CSS溢出属性在使用变换时无法正常工作

Question

我有一个图像，在悬停时会放大，但我希望它保持原始高度和宽度。我尝试设置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">

- sjf

---

FYI，IE9 不支持 -ms-transition，只支持 -ms-transform。-ms-transition 属性没有被使用。另外，你的高度和宽度缺少单位。 - BoltClock

我一直在想“-ms-”是从哪里来的。这主要是网络教程作者的发明；IE10从标准属性开始，没有费心去尝试实验性版本。 - Katana314

Answer 1

这里有一个工作中的jsfiddle。

如果你将图像放在带有overflow:hidden属性的div中，然后在该div内缩放图像，就可以实现你想要的效果。

你之前的做法是将overflow:hidden属性应用于图像本身。当你将图像放大时，只是使图像变得更大。没有溢出需要隐藏。将图像限制在固定大小的div中，然后在其中缩放图像，可以隐藏div的溢出部分（图像的边缘）。

- Tim McClure

---

这意味着溢出应该在父容器中。对吧？ - Abdalla Arbab

Answer 2

请使用一个div容器来放置图片，并设置overflow:hidden；

示例 在这里。

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

- Ganesh Yadav

Answer 3

看一下这个结果。链接

你需要使用块级元素来控制溢出隐藏。

- Guarana