页面调整大小时元素出血

Question

我正在研究一个简单的网站，我遇到了一个我无法理解的问题。

我已将每个<section>设置为完整高度，然后将一些嵌套部分设置为以页面为中心的内容。当我将第一页滚动到第二页时，我看到了奇怪的表现。要重现，请调整浏览器的大小。我期望的性能是让所有元素都调整大小并保持在浏览器窗口的中间。

向下滚动到第二个屏幕时出现问题。调整浏览器窗口大小会导致content-center类渗入下一部分。我认为这是因为图像没有调整大小，我似乎无法通过related answer来处理图像。

这是显示行为的Fiddle。代码片段如下。

HTML

<section id="wrapper">
            <section id="pages">
                <section class="page active" id="page1">
                    <section class="content-container">
                        <section class="content-center">
                            <h1>Section 1</h1>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>    
                        </section>
                    </section>
                </section>
                <section class="page" id="page2">
                    <section class="content-container">
                        <section class="content-center">
                            <h1>Section 2</h1>
                            <img src="https://farm8.staticflickr.com/7392/12829130433_ee4071030b_b.jpg" />
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        </section>
                    </section>
                </section>
                <section class="page" id="page3">
                    <section class="content">
                        <h1>Section 3</h1>
                        <img src="https://farm8.staticflickr.com/7392/12829130433_ee4071030b_b.jpg" />
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                    </section>
                </section>
        <section id="nav">
            <a id="next" href="#"></a>
            <a id="prev" href="#"></a>
        </section>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    height:100%;
}

#pages {
    width: 100%;
    height:100%;
    position:relative;
}

/** nav **/
#nav {
    display:inline;
    width:auto;
    height:50px;
    position:fixed;
    bottom:35px;
    left:35px;
    background:rgba(220,220,220,0.7);
    border-radius:5px;
}

#nav #next {
    height:48px;
    width:48px;
    cursor:pointer;
    display:inline-block;
    background:url(http://icons.iconarchive.com/icons/visualpharm/ios7v2/48/Arrows-Down-icon.png);
}

#nav #prev {
    height:48px;
    width:48px;
    background:url(http://icons.iconarchive.com/icons/visualpharm/ios7v2/48/Arrows-Up-icon.png);
    cursor:pointer;
    display:inline-block;
}

/** page structure **/
.page {
    height:100%;
}

.content-container {
    width:580px;
    height:100%;
    margin:0 auto;
    padding:15px;
}

.content-center {
    width:100%;
    height:auto;
    margin:0 auto;
    padding:15px;
    background:rgba(225,225,225,0.7);
    border-radius:5px;

    position:relative;
    top:50px;
    left:0;
    bottom:0;
    right:0;
}

.content-center img {
    height:auto;
    max-width:100%;  
}

#page1 {
    display:block;
    background:url(https://farm3.staticflickr.com/2865/13367252423_9800f13cd3_b.jpg) fixed center center no-repeat;
    background-size: cover;
}

#page1 p {
    font-size:3.5vmin;
    margin:0;
}

#page2 {
    display:block;
    background:url(https://farm9.staticflickr.com/8394/10187216006_ed71530f7e_b.jpg) fixed center center no-repeat;
    background-size: cover;
}

#page2 h1{
    text-align: center;
}