将图像拆分为左右两部分并填充浏览器

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 百分比而不是像素值，它根据页面大小动态设置大小和位置。要完成此操作，只需将整个框设置为 100% 宽和 100% 高，它就会适当地填充页面。

编辑： CSS 用于将 div 平行放置在下方：

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

将图像拆分为左右两部分并填充浏览器

Split an image into left and right parts and fill the browser

html

css

css-float

parallax