CSS在保持尺寸的同时对图像进行缩放

I would like to use the CSS3 scale() transition for a rollover effect, but I'd like to keep the rollover image dimensions the same. So, the effect is that the image zooms in, but it remains constrained to its existing width and height.

我想使用CSS3 scale()过渡来实现翻转效果，但我希望保持rollover图像的尺寸相同。因此，效果是图像放大了，但是它仍然被限制在现有的宽度和高度上。

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

Here's a basic fiddle to begin with.

这里有一个基本的小提琴开始。

But again, I want the image to keep the width/height.

同样，我想让图像保持宽度/高度。

I'm not married to using the css3 scale. Maybe there's a better way by resizing the element.

我不习惯使用css3量表。也许有更好的方法来调整元素的大小。

1 个解决方案

#1

You could achieve that simply by wrapping the image by a <div> and adding overflow: hidden to that element:

您可以通过

包装图像并向该元素添加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.

工作演示。

Also it's worth noting that <img> element (like the other inline elements) sits on its baseline by default. And there would be a 4~5px gap at the bottom of the image.

同样值得注意的是， CSS在保持尺寸的同时对图像进行缩放元素(与其他内联元素一样)默认位于其基线之上。在图像的底部会有4~5px的空隙。

That vertical gap belongs to the reserved space of descenders like: g j p q y. You could fix the alignment issue by adding vertical-align property to the image with a value other than baseline.

这个垂直间隙属于后代保留的空间，例如:gj pqy。您可以通过向图像添加垂直对齐属性来修复对齐问题，该属性的值不是基线。

Additionally for a better user experience, you could add transition to the images.

此外，为了获得更好的用户体验，您可以向映像添加转换。

Thus we'll end up with the following:

因此，我们将得出以下结论:

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

UPDATED DEMO.

更新后的演示。

#1