Html CSS缩放动画是否也将图像向左移动？

我正在尝试制作一个使用CSS动画的图像库，但是我遇到了一些奇怪的效果。我有一个较小的缩略图开始，我希望它的规模为两倍的大小，当我悬停在它。这一部分可以工作，但它也会使它向左移动，最后会越过屏幕边缘。我该怎么做才能修好它

<style>
    .zoom {
        transition:1s ease-in-out;
    }
    .zoom:hover {
        transform:scale(2);
    }
</style>

<div class="content">
    <div class="zoom">
        <img alt="Paperplane" src="Paperplane.png" style="width: 200px; height: 62px">
        <br> <span class="caption">A paper plane</span>
    </div>
</div>

.zoom{
转换：1s易入易出；
}
.缩放：悬停{
变换：尺度（2）；
}

纸飞机

---

它没有向左移动。但是，左边缘正在移动，右边缘也在移动。因为您的内容是左对齐的，所以它似乎向左移动

可以设置变换原点：

.zoom {
    transition: 1s ease-in-out;
    transform-origin: left top;
    background: pink;
}

也简单地考虑使用：< /P>

---

或者，若您需要图像的不可变区域，可以尝试添加溢出：隐藏容器

对于此示例，请在缩放类之前使用类内容：

.content{
    overflow:hidden;
}

---

对于此示例条目，您可以将两者结合使用：

.content{
    overflow:hidden;
}
.zoom:hover {
    transform:scale(2);
    transform-origin: left bottom;
}

---

正如isherwood所述，错误是由于

.zoom

占据了整个宽度，而不仅仅是可见部分

另一个解决方案是size

.zoom

，这样它只占用您想要的空间量，在本例中是图像的宽度。您可以通过给它一个显式的宽度来实现这一点

.zoom {
    transition:1s ease-in-out;
    width:200px;
}

但是，由于元素仍然从中间变换，因此它仍然会超出视口，因为它太近了。要解决此问题，可以使用

变换原点：左

或在任意一侧提供足够的空间，以便缩放版本不会超出视口。我用填充物来做这件事

另一个注意事项是：将事物缩放到超出其默认值（

scale（1）

）的程度是不好的，因为它们太大而变得模糊。因此，您可以将元素的大小设置为

width:400pxtransform:scale（.5）

，然后在悬停状态下转到

transform:scale（1）

，它将删除此问题

还请注意，嵌入样式是不好的，您应该几乎一直使用外部样式表

.zoom {
    transition:1s ease-in-out;
    width:200px;
}