Question

我在网页顶部附近有一张图片。我这样做的目的是，当我将鼠标悬停在图像上时，它会稍微放大。但是，这样做时，我搞砸了一些东西，无论是否激活了悬停，图像都只会显示一部分。我已经尝试删除添加的部分代码，但是如果不完全删除悬停动画，似乎无法修复它。我还尝试过更改边距，填充和位置。我正在使用Bootstrap 4，如果有所作为。我敢肯定这很简单，我似乎无法弄清楚需要更改什么。

以下是指向Codepen的链接：https://codepen.io/amandathedev/pen/zyEyze

这是CSS的相关部分：

.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}

.imgCard {
    position: absolute;
    top: 0;
    left: 0;
}

.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}

.imgBox:hover .imgCard img {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

Answer 1

您需要将transform-origin设置为居中，以便它将从居中缩放，因此您的CSS必须如下所示：

.. other CSS

.imgBox:hover .imgCard img {
    transform: scale(1.05);
    transform-origin: center;
    -webkit-transform: scale(1.05);
}

Answer 2

看一下您在Codepen上的代码示例，该解决方案看起来是使img的宽度为100％。因此，在您的示例中，您将执行以下操作：

.photo {
    width:100%
}

但是，这会切断图像的底部。您将需要调整包含imgCard的imgBox的高度。当前设置为360px。由于您的示例编写方式不同，因此最好只选择一个数字，以使生成的图像具有与原始图像相同的长宽比（播放它时，478px看起来像是显示的魔术数字）整个图片）。

使用CSS在悬停时缩放图像，但保持图像大小。我可以使用它，但是它只显示图像的一个角

2 个答案: