HTML初學者，關於影像尺寸

我想創建一個簡單的div頭，開始我的網站，我有兩個圖片logo.png和grey.jpg爲背景，以我的股利。我的標誌想要與標題具有相同的高度，但要留下並具有類似10%的寬度。問題是，標誌似乎沒有停留在size.It超過標題的高度，如果我把車身尺寸在汽車。HTML初學者，關於影像尺寸

<html> 
    <head> 
    <title>Museum page</title> 
    <meta charset="UTF-8"> 
    <meta name="keywords" content="Home Museum"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <style> 
     body { 
     width:auto; 
     height:auto; 
     padding-left: 10%; 
     padding-right:10%; 
     text-align:center; 
     } 
     div#header{ 
     height:10%; 
     width:100%; 
     background-image: url("images/grey.jpg"); text-align:center;} 

     nav{background-color:#d8d8d8;} 

     footer{background-color:white;clear:both;} 

    </style> 
    </head> 
    <body> 
    <div id="header"> 
     <img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">   
     <h1> Giorgos Angelousis life story </h1> 
     AM:2969 <br>Exercise-1a<br><br> 
    </div> 
    <footer> 
     <a href="#top">TOP </a> 
    </footer> 
    </body> 
</html>

我希望徽標與div，head的高度相同。

來源

2016-03-29 user2241915

嘗試添加'DIV＃頭IMG {高度：100％; }' –

@MoshFeu他已經在他的內聯CSS中獲得了...順便說一句，我不會混淆外部和內聯CSS –

你是對的..我沒有看到它。所以你需要設置'body' - 'height：100％'或者設置'＃header'固定高度（例如'px'） –

我已經創建了一個JSFiddle你:)

HTML：

<div class="flex"> 
    <div> 
     <img src="images/logo.png" alt="Smiley face" style="width:50px;height:100px;">   
    </div> 
    <div class="middle"> 
    <h1> Giorgos Angelousis life story </h1> 
    </div> 
    <div> 
    <div> 
     AM:2969 
    </div> 
    <div> 
     Exercise-1a 
    </div> 
    </div> 
</div>

CSS：

.flex{ 
    display: flex; 
    align-items: center; 
} 

.middle{ 
    padding-left:10px; 
    padding-right:10px; 
}

來源

2016-03-29 14:12:33

剛剛從<img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">刪除width:15%。

來源

2016-03-29 14:14:38 Robin

只需從您的標籤中刪除高度：100％。所以它會自動獲得標題 div的高度。這是示例代碼片段。

<html> 
 
    <head> 
 
    <title>Museum page</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="keywords" content="Home Museum"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <style> 
 
     body { 
 
     width:auto; 
 
     height:auto; 
 
     padding-left: 10%; 
 
     padding-right:10%; 
 
     text-align:center; 
 
     } 
 
     div#header{ 
 
     height:10%; 
 
     width:100%; 
 
     background-image: url("images/grey.jpg"); text-align:center;} 
 

 
     nav{background-color:#d8d8d8;} 
 

 
     footer{background-color:white;clear:both;} 
 

 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="header"> 
 
     <img src="test-img.jpg" alt="Smiley face" style="float:left;width:15%;">   
 
     <h1> Giorgos Angelousis life story </h1> 
 
     AM:2969 <br>Exercise-1a<br><br> 
 
    </div> 
 
    <footer> 
 
     <a href="#top">TOP </a> 
 
    </footer> 
 
    </body> 
 
</html>

來源

2018-03-09 14:02:48 RishabhM

HTML初學者，關於影像尺寸

回答

相關問題