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。 您可以通过向image使用除baseline之外的值添加vertical-align属性来修复对齐问题。

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

因此，我们最终会得到以下结果：

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

更新的演示 。