调整窗口高度时调整图像的大小

Saurabh Chaudhary 发表于 Dev

索拉（Saurabh Chaudhary）

参考这个问题。当我调整浏览器的高度时，我试图调整图像/滑块的大小，我想要达到的效果在这里。我尝试对div使用max-height和max-width，也使用了bootstrap img-response类，但是它不起作用。任何想法，该怎么做？

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

Aroniaina

您可以尝试以下三个步骤：

设置HTML和正文高度 html,body{height: 100%;}
设定容器高度 #head{height: 60%; max-height: 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。