當窗口高度調整大小時調整圖像大小

參考this問題。我正在調整瀏覽器高度的大小時調整圖像/滑塊的大小，我試圖實現的效果是here。我試圖使用最大高度和最大寬度的div，也使用bootstrap IMG響應類，但它不工作。任何想法，如何做到這一點？當窗口高度調整大小時調整圖像大小

#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--> \t 
 
    <!--<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>

來源

2015-11-02 Saurabh Chaudhary

你可以嘗試使用VH單位的高度。 http://generatedcontent.org/post/21279324555/viewportunits – MIke

謝謝，我用你的建議，和它正是我想要的。 @Michael Pon –

您可以嘗試以下三個步驟：

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

來源

2015-11-02 08:10:18 Aroniaina

它的工作完美，當我使用單個圖像，但與第三方滑塊，我必須在滑塊的配置上做出很多改變，所以我使用了來自評論的@Michael Pon的建議，而這正是我想要的。根據這個問題，我接受這個答案作爲它的工作。 –

當窗口高度調整大小時調整圖像大小

回答

相關問題