保持尺寸的情况下，在图像上实现CSS调整/缩放效果

Question

保持尺寸的情况下，在图像上实现CSS调整/缩放效果

32

我想使用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缩放。也许通过调整元素大小有更好的方法。

- mtyson

使用DHTML时，可以使用“style”对象并重置transform属性，例如：document.getElementById("myimage").style.transform=" scale(1.8);"; 可以查看以下两个网址：https://www.w3schools.com/howto/howto_css_zoom_hover.asp 和 https://developer.mozilla.org/en-US/docs/Web/CSS/transition。 - Samuel Marchant

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashem Qolami · Accepted Answer

您可以通过将图像包装在<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的间隙。

这个垂直间隙属于下行字母的保留空间，如：g j p q y。您可以通过为图像添加vertical-align属性来修复对齐问题，并将其设置为除baseline以外的其他值。

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

因此，我们最终得到以下内容：

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

更新后的演示.

.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>