引用this问题。我试图在调整浏览器高度时调整图像/ slider 的大小，我想要实现的效果是 here 。我尝试对 div 使用 max-height 和 max-width，还使用了 bootstrap img-responsive 类，但它不起作用。任何想法，如何做到这一点？
#topbar{
display:block;
position: fixed;
width:100%;
height: 30px;
color:#fff;
background-color:#073860;
top:0px;
display:block;
}
#head{
background-color:#ededed;
height:500px;
}
#logo{
font-family: 'lainiedayshregular';
display: block;
height:134px;
text-align: center;
margin: 29px 0px 0px;
padding: 20px 20px 5px;
font-size:3em;
}
#logo a{
position:relative;
height: 109px;
width: 377px;
text-decoration:none;
color:#073860;
font-size:2em;
}
nav{
position:absolute;
width:100%;
height: 56px;
background-color:#ffffff;
bottom:0px;
display:block;
border-bottom: 1px solid #ededed;
background: #FFF;
font-family: 'Cinzel', serif;
font-weight:600;
font-size: 10px;
line-height: 1.5;
letter-spacing: 2px;
}
nav ul li {
display:inline;
text-decoration:none;
}
nav ul li a{
text-decoration:none;
text-transform: uppercase;
color:#073860;
outline: 0px none;
}
.menu{
left: 0px;
width: 100%;
height: 56px;
position:sticky;
top:30px;
}
.navbarlogo{
font-family: 'lainiedayshregular';
color:#073860;
}
#test{
height:1000px;
background-color: #fafbf9;
}
#footer{
border-top: 1px solid #EDEDED;
background-color: #FFF;
height: 37px;
z-index: 3;
bottom: -35px;
transition: bottom 0.6s ease-in-out 0s;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--CSS Links-->
<link rel="stylesheet" type="text/css" href="style.css"><!--Custom stylesheet-->
<!--<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>-->
<title>Title here</title>
</head>
<body>
<div id="topbar"> </div>
<div id="logo"><a href="#">
Layla
</a> </div>
<div id="head" class="row" style="vertical-align:middle; text-align:center; max-width:100%; height:auto;">
<img class="img-responsive" src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg" style=" max-width:60%; height:auto; image-rendering: optimizequality"/>
</div>
<nav class="menu">
</nav>
<div id="test" class="row"></div>
<footer id="footer" style='display:none; position:fixed; bottom:0px; left:0px; width:100%;'>footer test</footer>
</body>
</html>最佳答案
您可以尝试以下三个步骤:
- 设置 html 和 body 高度
html,body{height: 100%;} - 设置容器高度
#head{height: 60%;最大高度:60%;} - 设置img高度
#head img{height: 100%;width: auto;}
结果在代码片段中
#topbar{
display:block;
position: fixed;
width:100%;
height: 30px;
color:#fff;
background-color:#073860;
top:0px;
display:block;
}
#head{
background-color:#ededed;
height:500px;
}
#logo{
font-family: 'lainiedayshregular';
display: block;
height:134px;
text-align: center;
margin: 29px 0px 0px;
padding: 20px 20px 5px;
font-size:3em;
}
#logo a{
position:relative;
height: 109px;
width: 377px;
text-decoration:none;
color:#073860;
font-size:2em;
}
nav{
position:absolute;
width:100%;
height: 56px;
background-color:#ffffff;
bottom:0px;
display:block;
border-bottom: 1px solid #ededed;
background: #FFF;
font-family: 'Cinzel', serif;
font-weight:600;
font-size: 10px;
line-height: 1.5;
letter-spacing: 2px;
}
nav ul li {
display:inline;
text-decoration:none;
}
nav ul li a{
text-decoration:none;
text-transform: uppercase;
color:#073860;
outline: 0px none;
}
.menu{
left: 0px;
width: 100%;
height: 56px;
position:sticky;
top:30px;
}
.navbarlogo{
font-family: 'lainiedayshregular';
color:#073860;
}
#test{
height:1000px;
background-color: #fafbf9;
}
#footer{
border-top: 1px solid #EDEDED;
background-color: #FFF;
height: 37px;
z-index: 3;
bottom: -35px;
transition: bottom 0.6s ease-in-out 0s;
}
html,body{height: 100%;}
#head{height: 60%; max-height: 60%; text-align: center; vertical-align: middle;}
#head img{height: 100%;width: auto; }<div id="topbar"> </div>
<div id="logo"><a href="#">
Layla
</a> </div>
<div id="head" class="row">
<img class="img-responsive" src="http://www.freelargeimages.com/wp-content/uploads/2014/12/Landscape_01.jpg"/>
</div>
<nav class="menu">
</nav>
<div id="test" class="row"></div>
<footer id="footer" style='display:none; position:fixed; bottom:0px; left:0px; width:100%;'>footer test</footer>关于javascript - 调整窗口高度大小时调整图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33472812/