如何在不添加滚动条的情况下使图像部分落在屏幕上

Question

我想要从左侧和右侧出来的图像。到目前为止，请参阅image 。

我设法让它工作，给左边的图像在左边的图像位于绝对位置，左边是-30像素，但是当我对右边的图像做相反的操作时（也就是位置：绝对和右边：-30px） ），图像不会像在右侧那样被切断。

相反，页面变得更宽，以便为右侧的图像留出空间。我不知道如何让这个工作，我也不知道怎么说这个问题，我的搜索几乎与我想要找到的东西有关。

双方HTML下方：

  <div class="imgdecalleft">
  <img src="images/img/patroon.svg" alt="patroon">
  </div>
  </div>
  <div class="imgdecalright">
  <img src="images/img/patroon.svg" alt="patroon">
  </div>

---

随后的CSS：

.imgdecalleft {
width: 15%;
position: absolute;
left: -30px;
}
.imgdecalright {
width: 15%;
position: absolute;
right: -30px;
}

Answer 1

添加这个：

body {
  overflow-x: hidden;
}

Answer 2

这是一种替代方法，它依赖于将图像宽度设置为容器div的宽度，然后偏移容器内的图像。在这种情况下使用溢出仅影响这些div及其图像。

这应该仍然允许页面在狭窄的屏幕上水平滚动。

.imgdecalleft {
  width: 30%;
  position: absolute;
  left: 0px;
  overflow: hidden;
}

.imgdecalleft img {
  width: 100%;
  position: relative;
  left: -50%;
}

.imgdecalright {
  width: 30%;
  position: absolute;
  right: 0px;
  overflow: hidden;
}

.imgdecalright img {
  width: 100%;
  position: relative;
  left: 50%;
}

<div class="imgdecalleft">
  <img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>
</div>
<div class="imgdecalright">
  <img src="https://cdn.pixabay.com/photo/2012/03/01/15/47/abstract-20445_960_720.jpg" alt="patroon">
</div>