如何在屏幕边缘截断图像？

Question

我有一个<img>，其来源比屏幕大。所以它与屏幕的右边框重叠，这使我的页面可以水平滚动。我希望图像在屏幕右边缘被截断，这样我的网站就不再比屏幕大了。我怎样才能做到这一点？

这是一直向右滚动时的屏幕截图：

Answer 1

您可以使用名为 overflow 的 CSS 属性 来实现。每当一个元素与另一个元素重叠时，它就会生效，默认值为 overflow: visible，这意味着容器元素将呈现在元素外部，因此子元素仍然可见。

假设您没有更合适的更具体的容器（因为这将适用于所有元素），您可以简单地这样做：

body {
  overflow: hidden
}

这将完全阻止呈现父元素之外的任何子元素。