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 */
}

这是一个基本的 fiddle 。

但同样，我希望图像保持宽度/高度。

我没有结婚使用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 */
}

<强> WORKING DEMO

值得注意的是，<img>元素（与其他内联元素一样）默认位于 baseline 。并there would be一个4~5px gap at the bottom of the image。

垂直间隙属于下行器的保留空间，如：g j p q y。您可以通过向{+ 1}}以外的值添加vertical-align属性来修复对齐问题。

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

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

baseline

<强> UPDATED DEMO

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

1 个答案: