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

时间:2017-12-21 16:47:30

标签: html css image

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

我设法通过给出div来使其工作,左边的图像位于绝对位置,左边是-30px,但是当我对右边的图像执行相反的操作时(也就是位置:绝对和右边) :-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;
}

2 个答案:

答案 0 :(得分:0)

添加:

body {
  overflow-x: hidden;
}

答案 1 :(得分:0)

这是一种替代方法,它依赖于将图像宽度设置为容器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>