我正在尝试为以下示例实现解决方案。我的网站有多个选择器，我希望主页看起来像这样: Image example
但是，如果我填充内容但我希望图像能够完全显示和可见，它会拉伸(stretch)。上面还有一些带导航栏的空白。
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}
@media(min-width:768px) {
body {
padding-top: 100px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
}
.navbar-fixed-top .navbar-brand {
padding: 15px 0;
}
}
/*deviders*/
.home-tab{
height: 100%;
padding-top: 150px;
text-align: center;
background-image: url("http://i.imgur.com/wyyLDvo.jpg");
}
.about-tab {
height: 100%;
padding-top: 150px;
text-align: center;
background: #8dd8f8;
}
.service-tab {
height: 100%;
padding-top: 150px;
text-align: center;
background: #9D714F;
}
.info-tab{
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.contact-tab {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
/*hover effect*/
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
/*navbar*/
.navbar-default {
background-color: #607d8b;
border-color: #ffffff;
}
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #000000;
}
.navbar-default .navbar-text {
color: #000000;
}
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #000000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #000000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #000000;
}
.navbar-default .navbar-link {
color: #000000;
}
.navbar-default .navbar-link:hover {
color: #000000;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #000000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #000000;
background-color: #ffffff;
}
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Team Husky</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom-style.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">
<img src="img/teamhuskylogo.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#home" rel="" id="anchor1" class="anchorLink">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#service">Service</a>
</li>
<li>
<a href="#info">Info</a>
</li>
<li>
<a href="#contact">Contact us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section id="home" class="home-tab">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Home</h1>
</div>
</div>
</div>
</section>
<section id="about" class="about-tab ">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Profolio</h1>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<h2>Hover effect 1</h2>
<a class="info" href="#">link here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="service" class="service-tab">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Service</h1>
<h2>Promotion an ourselves up otherwise my</h2>
<p>Far quitting dwelling graceful the likewise received building. An fact so to that show am shed sold cold. Unaffected remarkably get yet introduced excellence terminated led. Result either design saw she esteem and. On ashamed no inhabit ferrars it ye besides resolve. Own judgment directly few trifling. Elderly as pursuit at regular do parlors. Rank what has into fond she.</p>
<p>Quick six blind smart out burst. Perfectly on furniture dejection determine my depending an to. Add short water court fat. Her bachelor honoured perceive securing but desirous ham required. Questions deficient acuteness to engrossed as. Entirely led ten humoured greatest and yourself. Besides ye country on observe. She continue appetite endeavor she judgment interest the met. For she surrounded motionless fat resolution may.</p>
<p>Affronting imprudence do he he everything. Sex lasted dinner wanted indeed wished out law. Far advanced settling say finished raillery. Offered chiefly farther of my no colonel shyness. Such on help ye some door if in. Laughter proposal laughing any son law consider. Needed except up piqued an.</p>
<p>Give lady of they such they sure it. Me contained explained my education. Vulgar as hearts by garret. Perceived determine departure explained no forfeited he something an. Contrasted dissimilar get joy you instrument out reasonably. Again keeps at no meant stuff. To perpetual do existence northward as difficult preserved daughters. Continued at up to zealously necessary breakfast. Surrounded sir motionless she end literature. Gay direction neglected but supported yet her.</p>
<p>Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst.</p>
<p>Projecting surrounded literature yet delightful alteration but bed men. Open are from long why cold. If must snug by upon sang loud left. As me do preference entreaties compliment motionless ye literature. Day behaviour explained law remainder. Produce can cousins account you pasture. Peculiar delicate an pleasant provided do perceive.</p>
<p>Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure. Rich four like real yet west get. Felicity in dwelling to drawings. His pleasure new steepest for reserved formerly disposed jennings.</p>
<p>Old there any widow law rooms. Agreed but expect repair she nay sir silent person. Direction can dependent one bed situation attempted. His she are man their spite avoid. Her pretended fulfilled extremely education yet. Satisfied did one admitting incommode tolerably how are.</p>
<p>Ever man are put down his very. And marry may table him avoid. Hard sell it were into it upon. He forbade affixed parties of assured to me windows. Happiness him nor she disposing provision. Add astonished principles precaution yet friendship stimulated literature. State thing might stand one his plate. Offending or extremity therefore so difficult he on provision. Tended depart turned not are.</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="info" class="info-tab">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Info</h1>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email@example.com
<br />
<i class="glyphicon glyphicon-globe"></i><a href="http://www.jquery2dotnet.com">www.jquery2dotnet.com</a>
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Twitter</a></li>
<li><a href="https://plus.google.com/+Jquery2dotnet/posts">Google +</a></li>
<li><a href="https://www.facebook.com/jquery2dotnet">Facebook</a></li>
<li class="divider"></li>
<li><a href="#">Github</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>最佳答案
只需将“.home-tab”的高度设置为100vh，并将背景图片的大小设置为cover:
.home-tab{
height: 100vh;
padding-top: 150px;
text-align: center;
background-image: url("http://i.imgur.com/wyyLDvo.jpg");
background-size: cover;
}
这是一个工作示例:jsfiddle
关于html - 滚动 CSS 时图像内容全屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38419098/