我想使图像充满屏幕。
我已经研究了几种方法来做这样的事情，但是我似乎什么也做不了。
我还想在“了解更多”超链接中添加滚动功能，以使页面向下平滑滚动。
我已将项目更改为占位符，并将其上传到CodePen。
这里是：
（还要注意，它也使用了我的photoshop许可证附带的typekit，因此它可能对您不起作用，并且在我的wampp设置中，标题文本为白色而不是灰色。
http://codepen.io/anon/pen/pgRKoV
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<script>try{Typekit.load({ async: false });}catch(e){}</script>
<script src=JS/jquery.scrollex></script>
<script src=JS/jquery.scrollex></script>
</head>
<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li class="current-item"><a href="#">Home</a></li>
<li>
<a href="#">Dropdown <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4 & 5</a></li>
</ul>
</li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</nav>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>Lorem Ipsum</h1>
<p>Dolor sit Amet.</p>
<a href="#one" class="next">Start</a>
</div>
</div>
<section id=one>
<div class="Thumbnails">
<div class="container">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg">
</div>
<div class="thumbnail">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg">
</div>
<div class="thumbnail">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="http://www.engraversnetwork.com/files/placeholder.jpg">
</div>
</div>
</div>
</div>
</div>
</section>
<div class="learn-more">
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
<p><a href="#">Lorem ipsum</a></p>
</div>
<div class="col-md-4">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
<p><a href="#">Lorem ipsum</a></p>
</div>
<div class="col-md-4">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pulvinar neque, gravida ultrices sem. Cras congue dapibus tortor, a condimentum magna pharetra at. Quisque scelerisque ullamcorper eros, eu vulputate justo aliquet id. Praesent
auctor interdum odio vel suscipit. Integer placerat vitae odio tempus commodo. Morbi mollis ex justo, nec pulvinar lectus finibus at. Maecenas scelerisque est in nulla viverra, vel cursus elit sollicitudin.</p>
<p><a href="#">Lorem ipsum</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
.jumbotron {
background-image:url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
height: 1000px;
background-repeat: no-repeat;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
text-align: center;
margin-top: 100px;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry",sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry",sans-serif;
font-style: italic;
font-weight: 1000;
text-shadow: 3px 3px #000;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.Thumbnails {
background-color: #efefef;
border-bottom: 1px solid #dbdbdb;
}
.Thumbnails h2 {
color: #393c3d;
font-size: 24px;
}
.Thumbnails p {
font-size: 15px;
margin-bottom: 13px;
}
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
background:#DAE6EB;
margin:0px auto
}
.menu {
width:1000px;
margin:0px;
margin-bottom: -100px;
opacity:5;
}
.menu li {
margin:0px;
list-style:none;
font-family:'industry';
font-size: 18px;
}
.menu a {
transition:all linear 0.15s;
color:#98a1a4;
font-size: 18px;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#414546;
font-size: 18px;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size: 18px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#98a1a4B;
}
.sub-menu li {
display:block;
font-size: 18px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
font-size: 18px;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#98a1a4;
}
对于“巨型”图像，您具有以下CSS：
height: 1000px;
如果您想使图像大小与屏幕大小相同，请尝试使用100％或100vh。
这应该可以解决问题：
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height:100vh;
width: 100vw;
padding:100px 0;
text-align: center;
}
关于问题的第二部分，我相信这里已经回答了：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句