CSS在保持尺寸的同时调整图像大小/放大效果

Question

我想使用CSS3 scale()过渡来实现翻转效果,但我想保持翻转图像尺寸相同.因此,效果是图像放大,但仍然受其现有宽度和高度的限制.

img:hover {
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
}

这是一个基本的小提琴开始.

但同样,我希望图像保持宽度/高度.

我没有结婚使用css3规模.也许通过调整元素大小可以有更好的方法.

Answer 1

您可以通过将图像包装<div>并添加overflow: hidden到该元素来实现:

<div class="img-wrapper">
    <img src="..." />
</div>

.img-wrapper {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
}

工作演示.

另外值得注意的是,默认情况下,<img>元素(与其他内联元素一样)位于其基线上.而且会有一个4~5px在图像的底部间隙.

垂直间隙属于下行器的保留空间,如:gjpq y.您可以通过向vertical-align图像添加属性以外的值来修复对齐问题baseline.

此外,为了获得更好的用户体验,您可以添加transition到图像中.

因此,我们最终会得到以下结果:

.img-wrapper img {
    transition: all .2s ease;
    vertical-align: middle;
}

更新的演示.