調整窗口高度時調整圖像的大小
[英]Adjust size of image when the window's height is resized
問題描述
參考這個問題。 當我調整瀏覽器的高度時，我試圖調整圖像/滑塊的大小，我想要達到的效果在這里 。 我嘗試對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>
1 個解決方案
解決方案1
0 已采納 2015-11-02 08:10:18
您可以嘗試以下三個步驟：
- 設置html和body高度
html,body{height: 100%;} - 設置容器高度
#head{height: 60%; max-height: 60%;}#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>
我需要在加載頁面和調整頁面大小時根據窗口的大小設置div的高度
[英]I need to set the height of a div according to the size of the window when the page is loaded and when the page is resized
使用“background-size：contains”調整背景圖像的高度
[英]Getting the height of a background image resized using “background-size: contain”
自動將div高度調整為窗口大小，但不小於孩子
[英]Automatically adjust div height to window size, but no smaller than children
如何使用調整后的圖像比例調整頂部/左側/寬度/高度
[英]How to adjust the top/left/width/height based on the ratio of the resized image,using jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.