Question 44647 in Html Question posted in
Some basic documentation can be found here.

How can I size img element in div tag in header tag which has fixed position? – Html

I am trying to fix header at the top of a page, and insert an image contained by a div tag into header. I was successful in inserting, except that I could not fit the image in the div. Actually div tag does not fit in the header tag.

Here are my code snippets:

index.html

<!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>CloneCoding</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="main">
    <div class="main-place_holder place_holder"></div>
    <header class="main-header place_holder align_fixed_header_center">
      <div class="main-header-logo">
        <img src="assets/images/logo.png" alt="image" class="main-header-logo-image">
      </div>
      <div class="main-header-brand">brand</div>
    </header>
    <section class="main-container">
      <div class="main-container-card">content</div>
      <div class="main-container-card">content</div>
      <div class="main-container-card">content</div>
    </section>
  </main>
</body>
</html>

style.css

body {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}

.main {
  padding: 1rem;
  border: 1px solid salmon;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.place_holder {
  height: 3rem;
  margin: 3rem;
}
.align_fixed_header_center {
  width: auto;
  top: 0;
  left: 0;
  right: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.main-header-logo {
  /* Doesn't work */
  width: 100px;
  height: auto;
}
.main-header-logo-image {
  height: 100%;
}

Here are what I have tried:

  1. height: 100%; for .main-header-logo-image class
  2. width: 100px; for .main-header-logo class
  3. height: 100%; for .main-header-logo class

Is there a way that I can fit this big image into fixed header?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Adding height to .main-header did the job. For my case, Victor, image is too big to have it worked out with width: 100%; for .main-header-logo-image.

    .main-header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3em;
}

  2. 0

    To fit image to its container proportionally either 100% to the width or height, you can use max-width, max-height properties:

    .main-header-logo-image {
  height: 100%;
  /* fit image to container */
  max-width: 100%;
  max-height: 100%;
}

    body {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}

.main {
  padding: 1rem;
  border: 1px solid salmon;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.place_holder {
  height: 3rem;
  margin: 3rem;
}
.align_fixed_header_center {
  width: auto;
  top: 0;
  left: 0;
  right: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.main-header-logo {
  /* Doesn't work */
  width: 100px;
  height: auto;
}
.main-header-logo-image {
  height: 100%;
  /* fit image to container */
  max-width: 100%;
  max-height: 100%;
}
    <main class="main">
  <div class="main-place_holder place_holder"></div>
  <header class="main-header place_holder align_fixed_header_center">
    <div class="main-header-logo">
      <img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online.png" alt="image" class="main-header-logo-image">
    </div>
    <div class="main-header-brand">brand</div>
  </header>
  <section class="main-container">
    <div class="main-container-card">content</div>
    <div class="main-container-card">content</div>
    <div class="main-container-card">content</div>
  </section>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search