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

我遇到了懸掛圖像以外的容器/屏幕外的問題，而不會中斷網站的響應。主要問題是您必須根據圖像的位置來左右滾動。在不破壞響應的情況下關閉屏幕圖像

這裏是我想要達到一個例子（產品圖片左，右，你向下滾動）： 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; 
}

讓我知道如果您有任何問題，我偶然遺漏了。

來源

2016-04-19 dvoutt

嘗試：

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

來源

2016-04-19 20:33:28

這將只是削減其關閉，所以當你的屏幕變得非常大，這將很難停在圖像上。目標是它會掛在屏幕上，但響應不會左右滾動。如果您在使頁面變得更寬或更窄時使用invision網站，您會看到更多的圖像。 – dvoutt

試過你的編輯，沒有工作。 – dvoutt

我把你的筆[這裏]分叉了（http://codepen.io/antibland/pen/eZKRGR）。這不是你所追求的嗎？ –

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

回答

相關問題