css - 如何在屏幕边缘切断图像？

Question

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

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

标签： cssimageoverflow

Answer 1

您可以通过使用名为overflow的 CSS 属性来做到这一点。每当一个元素与另一个元素重叠时，这就会生效，默认情况下overflow: visible这意味着容器元素将呈现在元素之外，因此子元素仍然可见。

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

body {
  overflow: hidden
}

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