将图片拆分为左侧和右侧部分并填充浏览器

Question

我试图将图片拆分为左侧和右侧。我这样做了，但我希望div居中，并填充浏览器，使图像边缘和边缘，并作出响应。现在它左侧都是平齐的。

我把一个边框，所以你可以看到，它实际上是两个图像放在一起，使每个600x900。

的jsfiddle：https://jsfiddle.net/omarel/vnc522vu/3/

HTML

<div id="centercontainer"> 


<div id="scrollablecontainer"> 

    <img id="leftside" class="halfCompositionLeft" src="https://dl-web.dropbox.com/get/pool_left.jpg?_subject_uid=9047713&w=AAC25lQ4ebCI8ajjRKwfi_TANvxEYQruCRN5PQDEEZ70Uw"> 


    <img id="rightside" class="halfCompositionRight" src="https://dl-web.dropbox.com/get/pool_right.jpg?_subject_uid=9047713&w=AABZnKZrODSr9rGU5kOX7q2EHycNMAqq-mvlUxn0T5tVAg"> 


    </div> 

</div> 

CSS：

.scrollableSectionContainer section>img { 
    position:absolute; 
} 

.centercontainer { 
    margin: 0 auto; 
    overflow: hidden; 
    top: 0%; 
    right: 0%; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    position: relative; 
} 

.scrollablecontainer { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100% 
} 

    .halfCompositionLeft { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:600px; 
    height:900px;  
} 
.halfCompositionRight { 
    position: absolute; 
    top: 0px; 
    left: 600px; 
    width: 600px; 
    height: 900px; 
    border:#FFF solid thin; 
} 

Answer 1

试试这个：

#halfCompositionLeft{ 
    position: absolute; //Absolute Positioning. 
    top: 0px; //Top of the page. 
    left: 0px; //Leftmost side. 
    width: 50%; //Fill half the page. 
    height: 100%; //Fill page vertically. 
} 

#halfCompositionRight{ 
    position: absolute; //Absolute Positioning. 
    top: 0px; //Top of the page. 
    left: 50%; //Start halfway through the page. 
    width:50%; //Fill rest of page. 
    height: 100%; //Fill page vertically. 
} 

使用CSS的百分比，而不是像素值，其中DYNA根据页面大小设置大小和位置。要完成此操作，只需将满框宽100％和100％填满即可，并且可以适当填充页面。

编辑： CSS的下方放置格并行：

#halfCompositionLeft2{ 
    position: absolute; //Absolute Positioning. 
    top: 100%; //Similar, but at the bottom of the page, under the top div. 
    left: 0px; //Leftmost side. 
    width: 50%; //Fill half the page. 
    height: 100%; //Fill page vertically. 
} 

#halfCompositionRight2{ 
    position: absolute; //Absolute Positioning. 
    top: 100%; //Similar, but at the bottom of the page, under the top div. 
    left: 50%; //Start halfway through the page. 
    width:50%; //Fill rest of page. 
    height: 100%; //Fill page vertically. 
}