浏览器调整大小时大图像移动

Question

所以在我的网页上，我有许多大图像，向下滚动时可以看到这些图像。它们在我正常大小的浏览器上显示得很好，但是当我缩小浏览器的大小时，图像之间的空白区域会急剧增加。我想要两个图像之间的空白，但是我不希望它们之间的间隙改变和放大。顶部的 about 部分也是如此，当浏览器调整大小时，about 部分的空白会增加，并且它与下图之间的差距会扩大。

我正在尝试使我的网站具有响应性（因此使用 %），但是它现在运行得不太好，所以我可能会坚持制作一个普通的网站。但是，任何有用的回应将不胜感激！！！

html {
	font-family: 'Lato', sans-serif;
	overflow: scroll;
}

.about {
	width: 100%;
	height: 50%;
	background-color: #fffff;
	position: absolute;
}

.about h1 {
	text-align: center;
	font-weight: 900;
	font-size: 50px;
	color: #00b4ff;
}
.about p {
	text-align: center;
	margin-left: 30px;
	margin-right: 30px;
}

.books {
	max-width: 100%;
	height: auto;
	position: absolute;
	left: 0px;
	top: 990px;
	z-index: -2;
	background-position: center;
}

.business {
	width: 100%;
	position: absolute;
	left: 0px;
	top: 1800px;
	z-index: -2;
}

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style1.css"/>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'/>  
</head>

<div class="about">	
			<h1>ABOUT</h1> 
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
				esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
				in culpa qui officia deserunt mollit anim id est laborum <br><br>
				ed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
				totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
				sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
				magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
				consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
			</p>
		</div>
		<img class="books" src="http://delightedimages.com/wp-content/uploads/2015/07/Delighted-Images_Nicole-and-Ryan_Joshua-Tree_Engagement_82_0406.jpg" alt="books"/>
		
		<img class="business" src="http://nikonrumors.com/wp-content/uploads/2015/04/Nikon-1-J5-sample-images-4.jpg" alt="business"/>
	</div><!-- /container -->

Answer 1

您的图像有那些巨大的空白，因为您将它们绝对定位。如果您希望您的图像彼此重叠显示，请将它们设置为display: block;，而不是绝对定位它们。或者，如果您将图像设置为固定宽度，它们将不会调整大小并且您不会有那些空白。

Answer 2

你为什么不使用 flexbox？！

    .container {display: flex;flex-direction:column;}
    .about {
        background-color: #fffff;
        height: 50%;
    }

    .about h1 {
        text-align: center;
        font-weight: 900;
        font-size: 50px;
        color: #00b4ff;
    }
    .about p {
        text-align: center;
        margin-left: 30px;
        margin-right: 30px;
    }

    .books {
        height: auto;
        z-index: -2;
        background-position: center;
    }

    .business {
        z-index: -2;
    }

祝你好运

Answer 3

不要使用绝对位置来放置图像。要么使用标签为图像构建自己的 flex-containers，要么使用 margin-top 和 margin-bottom 标签来定义元素之间的空白，并使用浏览器的正常布局来发挥你的优势。下面将设置顶部图像完全按照它在您的设计中出现，但通过使用边距设置两个图像之间的间距，动态更改图像大小以匹配窗口宽度。如果您想要更多或更少的空白，只需更改第二张图像的边距编号。如果您希望距离相对于屏幕大小而不是像素大小，请改用百分比。

.books {
    max-width: 100%;
    height: auto;
    position: relative;
    left: 0px;
    margin-top: 990px;
    z-index: -2;
    background-position: center;
}

.business {
    width: 100%;
    position: relative;
    left: 0px;
    margin-top:100px;
    z-index: -2;
}

这是一个工作小提琴。 https://jsfiddle.net/pjgbp7jo/