將圖片拆分爲左側和右側部分並填充瀏覽器

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