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初学者，关于影像尺寸

回答

相关问题