レスポンスを破ることなく画面をハングアップ

Question

ウェブサイトの応答性を損なうことなく、コンテナ/オフスクリーンの外にイメージをぶら下げることに問題があります。主な問題は、画像の配置方法に基づいて左右にスクロールする必要があることです。ここで

は（あなたがスクロールダウンすると、商品の画像は、左と右）私が達成しようとしているものの例です： http://invisionapp.com/

私がこれまでにだのはここです： http://codepen.io/darcyvoutt/pen/EKRmOZ

画像上のコードは：

.section { 
    height: 505px; 
} 

.left, .right { 
    display: block; 
    float: left; 
    width: 50%; 
} 

.left { 
    background: yellow; 
} 

.right { 
    position: relative; 
} 

.image { 
    max-width: none !important; 
    height: 507px !important; 
    width: 873px !important; 
    display: block; 
} 

私が偶然に出なかったことに関するご質問がありましたら教えてください。

Answer 1

試してみてください。

.wrap { 
    ... 
    overflow: hidden; 
} 

.image { 
    position: absolute; 

    .right & { 
    left: 40%; 
    } 

    .left & { 
    right: 60%; 
    } 
} 

このHTMLで動作するはずです：

それを切断しますので、あなたの画面が本当に大きくなるとき、それはハードを持っているでしょう

<div class="section"> 
    <div class="left"> 
    <img class="image" src="http://sysomos.com/sites/default/files/map_twitter.png" />   
    </div> 
</div> 

<div class="section"> 
    <div class="right"> 
    <img class="image" src="http://sysomos.com/sites/default/files/map_twitter.png" />   
    </div> 
</div>