CODEWITHSUNDEEP
htmlimagesize
user2241915
user2241915

Reputation: 151

HTML beginner, about image size

I want to create a simple div header to start my website and i have two pics logo.png and grey.jpg as background to my div. My logo wants to have the same height as the header, but to be left and to have something like 10% of the width. The problem is that is that the logo doesnt seem to stay in size.It exceeds the height of the header if i put body size in auto.

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

I want the logo to be the same height as the div , head.

Upvotes: 0

Views: 97

Answers (3)

RishabhM
RishabhM

Reputation: 16

Just remove height:100% from your <img> tag. So it will automatically get the height of header div. Here's sample snippet.

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

Upvotes: 0

Robin
Robin

Reputation: 69

Just remove the width:15% from <img src="images/logo.png" alt="Smiley face" style="float:left;width:15%;height:100%;">.

Upvotes: 1

Oron Bendavid
Oron Bendavid

Reputation: 1533

I've created a JSFiddle for you :)

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

Upvotes: 0

Related Questions