Question

基于this，我设法弄明白了，但是在调整窗口大小时，h2仍然存在一个边距，我刚从h2移除了20px，然而，我不应该这样做，这仍然是一个问题。当我调整窗口大小时，div不会跟随图像，我会看到背景。有没有什么办法可以解决这个问题，而无需从每个h2中移除20px？但是在调整窗口大小时仍然没有间隙/没有任何中断。如果您查看整个代码段，然后调整浏览器窗口大小，您就会明白我的意思。

＆＃13;

body {
	padding:0;
	margin: 0;
	font-family: 'Raleway';

}

.nav {
    display:none;
	background-color: black;
	text-decoration: none;
	color: silver;
	margin: 0;
	list-style: none;
	text-align: center;
}

.nav > li {
	display: block;
}

/* .nav > li:before {
	content: "*";
} */

.nav > li > a {
	text-decoration: none;
	color: silver;
	font-size:24px;
	text-transform: uppercase;
	font-weight: bolder;
	letter-spacing: 4px;
}

.nav-btn {
	display:block;
	font-size: 30px;
	background-color: black;
	color: silver;
	text-align: center;
	cursor: pointer;
}

.image {
	background-image:url('https://www.wbnx.com/uploads/downloads/cover_art/850x315_reign_mary.jpg');
	width:100%;
    max-height:400px;
    background-position: left center absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
}

.title {
	display: inline-block;
	color: white;
	position:relative;
	margin: 15%;
	text-transform: uppercase;
}

.image {
	text-align: center;
	position:relative;
  background-color:green;
}

.image > h2 {
	padding-top: 50%;
	line-height: 50%;
}


@media screen and (max-width: 411px) {
	.title > h2 {
		font-size: 15px;
	}

	.image {
		max-height:280px;
	}
}

.submitbox {
	color: yellow;
	background-color: darkblue;
	padding:0;
    margin-top:-20px;
}

＆＃13;

<!DOCTYPE html>
<head>
<title>Welcome to France!</title>
<link rel="stylesheet" href="Reign.css" type="text/css1">
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- <div id="header">"Today I am King!"</div> -->
<nav>
	<span class="nav-btn">Menu</span>
  <ul class="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">Contact</a></li>
  </ul>
 </nav>
<div class="image"><div class="title"><h2>"Today, I am king!"<br />Mary, Queen of Scots.</h2></div></div>
<div class="submitbox"><h2>Sign up for our Newsletter!</h2></div>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('span.nav-btn').click(function () {
	$('ul.nav').toggle();
});
</script>
</body>

＆＃13;

窗口调整大小时，图像不会填充div

0 个答案: