为什么我的transform:scale()属性会将图像向左移动？

Question

我正在尝试制作一个使用 CSS 动画的图片库，但出现了一些奇怪的效果。我有一个较小的缩略图，当我将鼠标悬停在它上面时，我希望它能够缩放到两倍大小。该部分有效，但它也会使其向左移动，最终超出屏幕边缘。我应该做什么来修复它？

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

.zoom:hover {
  transform: scale(2);
}

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

JSFiddle 演示

Answer 1

它没有向左移动。然而，左侧边缘正在移动，右侧也是如此。由于您的内容是左对齐的，因此它看起来向左移动。这个彩色演示很好地展示了这一点：

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
}

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

  </div>
</div>

您可以设置变换原点：

transform-origin: left top;

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(2);
  transform-origin: left top;
}

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

  </div>
</div>

还可以考虑简单地使用不太引人注目的变换：

transform: scale(1.1);

.zoom {
  transition: 1s ease-in-out;
  background: pink;
}

.zoom:hover {
  transform: scale(1.1);
}

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

  </div>
</div>

Answer 2

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

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

.content{
    overflow:hidden;
}

http://jsfiddle.net/3b7afm7z/6/

---

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

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

http://jsfiddle.net/3b7afm7z/9

Answer 3

正如 isherwood 所描述的，错误是由于

.zoom

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

另一个解决方案是大小

.zoom

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

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

但是，由于元素仍然从中间进行变换，因此它仍然会超出视口，因为它非常接近。为了解决这个问题，您可以使用

transform-origin:left

或在两侧提供足够的空间，以便缩放后的版本不会超出视口。我在这个演示中使用了填充来做到这一点。

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

scale(1)

是不好的，因为它们会因太大而变得模糊。因此，您可以将元素的大小调整为

width:400px;

并默认设置为

transform:scale(.5)

，然后在悬停时转到

transform:scale(1)

，这样就可以消除此问题。

包含所有更改的演示

另请注意，嵌入样式是坏，您几乎应该一直使用外部样式表。