在不破壞響應的情況下關閉屏幕圖像

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>