Question

我正在尝试使用多张图片制作悬停缩放效果：

图片以页面为中心
放大时保持尺寸
图片宽度在img标签内嵌设置

这是我到目前为止所尝试的内容：

.img-zoom {
display: inline-block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.img-zoom img {
-webkit-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
margin: 0px 20px;
}
.img-zoom img:hover {
-webkit-transform: scale(1.21);
-ms-transform: scale(1.21);
transform: scale(1.21);
}

<div style="text-align: center;padding: 5px;">
    <div class="img-zoom">
        <img src="http://lorempixel.com/600/210" width="300" />
        <img src="http://lorempixel.com/600/210" width="300"/>
    </div>
</div>

...但图片在鼠标悬停时延伸。

Answer 1

听起来你想让图像在没有宽度/高度变化的情况下放大。我稍微修改了您的HTML，并在width元素上放置了内联.img-zoom参数。我认为这可以实现你所需要的。

.img-zoom {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.img-zoom img {
  display: block;
  width: 100%;
  transition: 0.4s ease;
  transform-origin: 50% 50%; /* center zoom */
}
.img-zoom img:hover {
  transform: scale(1.21);
}

<div style="padding: 5px; text-align: center;">
  <div class="img-zoom" style="width: 300px;">
    <img src="http://lorempixel.com/600/210" />
  </div>
  <div class="img-zoom" style="width: 300px;">
    <img src="http://lorempixel.com/600/210"/>
  </div>
</div>

具有多个图像的胡佛缩放效果并保持图像尺寸

1 个答案: