Question

所以在我的网页上，我有一些大图像，可以看到你向下滚动。它们在我的普通尺寸浏览器上显示正常，但是当我缩小浏览器的大小时，图像之间的空白区域会大幅增加。我想要两个图像之间的空白区域，但我不希望它们之间的差距发生变化和放大。对于顶部的大约部分存在相同的情况，因为当浏览器调整大小时，大约部分的白色空间增加并且它与下面的图像之间的间隙扩大。

我正在努力使我的网站响应（因此％）但是它现在不能很好地工作，所以我可能坚持制作一个普通的网站。但是，任何有用的回答都将非常感谢!!!

＆＃13;

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

＆＃13;

<!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 -->

＆＃13;

Answer 1

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

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

1 个答案: