在保持尺寸的同时对图像进行 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 */
}

这是一个基本的 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。您可以通过将vertical-align 属性添加到具有baseline 以外的值的图像来解决对齐问题。

另外，为了更好的用户体验，您可以在图片中添加transition。

因此我们将得到以下结果：

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

UPDATED DEMO.

.img-wrapper {
    display: inline-block;
    overflow: hidden;
    
    border: 1px solid gray;
}

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

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

<div class="img-wrapper">
    <img src="http://ts2.mm.bing.net/th?id=HN.608017620862175177&pid=15.1&H=160%20&W=80" />
</div>