Html 在保持尺寸的同时对图像进行 CSS 调整大小/放大效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22492498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Resize/Zoom-In effect on Image while keeping Dimensions
提问by mtyson
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.
我想使用 CSS3scale()过渡来实现翻转效果，但我想保持翻转图像尺寸不变。因此，效果是图像放大了，但仍受其现有宽度和高度的限制。
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 fiddleto 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 比例尺。也许通过调整元素大小有更好的方法。
回答by Hashem Qolami
You could achieve that simply by wrapping the image by a <div>and adding overflow: hiddento that element:
你可以简单地通过用 a 包裹图像<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 */
}
工作演示。
Also it's worth noting that <img>element (like the other inline elements) sits on its baselineby default. And there would bea 4~5pxgap at the bottom of the image.
另外值得注意的是，<img>元素（与其他内联元素一样）默认位于其基线上。并且图像底部会有一个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-alignproperty to the image with a value other than baseline.
该垂直间隙属于下降器的保留空间，例如：gjpq y。您可以通过将vertical-align属性添加到图像而不是baseline.
Additionally for a better user experience, you could add transitionto the images.
此外，为了获得更好的用户体验，您可以添加transition到图像中。
Thus we'll end up with the following:
因此，我们将得到以下结果：
.img-wrapper img {
transition: all .2s ease;
vertical-align: middle;
}
