在不破坏响应的情况下关闭屏幕图像

我遇到了悬挂图像以外的容器/屏幕外的问题，而不会中断网站的响应。主要问题是您必须根据图像的位置来左右滚动。在不破坏响应的情况下关闭屏幕图像

这里是我想要达到一个例子（产品图片左，右，你向下滚动）： 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）。这不是你所追求的吗？ –

在不破坏响应的情况下关闭屏幕图像

回答

相关问题