调整窗口高度时调整图像大小答案

【问题标题】：Adjust size of image when the window's height is resized调整窗口高度时调整图像大小
【发布时间】：2015-11-02 07:43:29
【问题描述】：

参考this问题。我试图在调整浏览器高度时调整图像/滑块的大小，我想要达到的效果是 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>

【问题讨论】：

您可以尝试使用 vh 单位作为您的身高。 generatedcontent.org/post/21279324555/viewportunits
谢谢，我采纳了你的建议，这正是我想要的。 @Michael Pon

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

你可以试试这三个步骤：

设置html和body高度html,body{height: 100%;}
设置容器高度#head{height: 60%; max-height: 60%;}
设置img高度#head img{height: 100%;width: auto;}

结果在sn -p

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

【讨论】：

它工作得很好，当我使用单个图像时，但使用第 3 方滑块时，我必须对滑块的配置进行大量更改，所以我使用了 cmets 的 @Michael Pon 的建议，它是正是我想要的。根据问题，我接受这个答案，作为它的工作。