我想要从左侧和右侧出来的图像。到目前为止,请参阅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;
}
答案 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>