スクロールバーを追加せずに画像を部分的に画面に落とす方法

Question

画像があります左右のウェブサイトから画像を取り出したいと思います。これまで私が持っているものはimageを参照してください。

左の画像は絶対位置と-30pxの左にありますが、右の画像では逆の場合（絶対位置と絶対位置は同じです）右：-30px）、画像は右端と同じように切り取られません。

代わりに、ページの右側にイメージのスペースが必要です。私はこれをうまく動作させる方法については全く知らないし、この問題をどのように語るかもわからず、私の検索は私が見つけようとしていることとほとんど関係していない。

<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：両側のためのHTML以下

.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>