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

Question

With reference to this question. 参考这个问题。 I am trying to adjust size of image/slider when the height of browser is resized, the effect i am trying to achieve is here . 当我调整浏览器的高度时，我试图调整图像/滑块的大小，我想要达到的效果在这里。 I tried using max-height and max-width to the div, also used bootstrap img-responsive class, but its not working. 我尝试对div使用max-height和max-width，也使用了bootstrap img-response类，但是它不起作用。 Any idea , how to do this? 任何想法，该怎么做？

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

Answer 1

You can try these three steps : 您可以尝试以下三个步骤：

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

The result is in the snippet 结果在摘要中

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-02 08:10:18

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-02 08:10:18

解决方案1
0 已采纳 2015-11-02 08:10:18