How to resize image into a header-CodePudding

Current Navbar

Hi, I want to resize my image into the header, which is shown by the salmon background in the attached picture. For some reason, it doesn't fit but expands beyond it. I'm attaching the code below.

body{
  background-color: bisque;
}
.header{
  background-color: salmon; 
}
.header img {
  float: left;
  width: 100px;
  height: 100px;
 
}

.header h1 {
  top: 18px;
  left: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel = "stylesheet" href="logo.css">
</head>
<body>
  <div >
    <img src="Small_scream.png">
    <h1>My website name</h1>
  </div>
</body>
</html>

CodePudding user response：

Set a height for your header - currently it's defined by your font size - and set your img height to 100%.

CodePudding user response：

You can position your image relative to the header size if you want to fit it inside the header div. And set the position of the image to left or right by changing these two property values.

CSS:

  body{
   background-color: bisque;
  }

.header{
  background-color: salmon; 
  position:relative;
}

 .header img {
  position: absolute;
  right:0%;
  width: 5%;
  height: 100%;
 }

  .header h1 {
   top: 18px;
   left: 10px;
  }

Also, you can fit the image in a more central position by:

img{
  object-fit: cover;
  object-position: 50% 50%;
}

You can alter the object-position as desired.