Question

我想创建一个简单的div标题来启动我的网站，我有两个图片 logo.png 和 grey.jpg 作为我的div的背景。我的徽标想要与标题具有相同的高度，但是要留下并且具有宽度的10%之类的东西。问题是，徽标看起来似乎没有大小。如果我把车身尺寸设置为自动，它会超过标题的高度。

<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的高度相同。

Answer 1

只需从width:15%移除<img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">。

Answer 2

我为你创建了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;
}

Answer 3

只需从<img>标记中删除高度：100％即可。因此它会自动获得标题 div的高度。这是一个示例代码段。

＆＃13;

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

＆＃13;

HTML初学者，关于图像大小

3 个答案: