div containing resized image, width are not resized to width of image

Question

I have a div with a fixed position containing an image that I have set to max-width:20% so it is scaled down. The height of the div is scaled to match the image but the width isn't, it looks like it's the same width of the initial size of the image.

I might be missing something fundamental but can't really understand this.

#logo {
  max-width: 20%;
}

#logoholder {
  position: fixed;
  left: 10px;
  top: 120px;
  background: rgb(47 47 47 / 36%);
  text-align: center;
}

#logo2 {
  max-width: 77px;
}

#logoholder2 {
  position: fixed;
  width: 77px;
  height: 77px;
  left: 10px;
  top: 30px;
  background: rgb(47 47 47 / 36%);
  text-align: center;
}

<div id="logoholder">
  <img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>

<-- Expected result -->
<div id="logoholder2">
  <img id="logo2" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>

Answer 1

I set some margins and borders for clarity - and left the original images in place (the first one is the one in play here)

I would suggest using a flex display for simplicity then we can set the container to a size and the height of the image to what we want relative to that (see comments in the CSS)

I set the button at the "top" but it could be relative position also and work around that "fixed" position issue.

body {
  margin: 0;
}

#logoholder {
  position: relative;
  left: 10px;
  top: 1rem;
  /*  background: rgb(47 47 47 / 36%);*/
  /* light violet background */
  background-color: #8080FF20;
}

#logo {
  max-width: 20%;
}

#logoholder2 {
  position: relative;
  left: 10px;
  top: 30px;
  */ width: 77px;
  height: 77px;
  /* light cyan background */
  background-color: #20E0E020;
}

#logo2 {
  max-width: 77px;
}


/* set up the blocks to keep the "gray" one at the top */

.container-all {
  display: flex;
  align-items: cemter;
  justify-content: cemter;
  /*stack then for this demo */
  flex-direction: column;
  /* the "lime" border around all the content */
  border: solid 1px #88ff88;
}

.container-all .content-container {
  margin: 0.5rem;
  /* get our logo (first container) at the top if we want to */
  /* margin-top:0;*/
}

.logo-container {
  /* keep logo/button at top when scrolling for this demo */
  align-self: flex-start;
  position: sticky;
  top: 0;
  /* set up this containers display */
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container .content-item {
  /* controls the height of the image on the button */
  /* these should be the same since the "default" is 16px font-size == 1rem */
  font-size: 1rem;
  /*  font-size:16px;*/
}

.logo-image {
  /* controlled by container font size as these have em */
  /* so if 1rem = 16px this 4em would be 16 X 5=80px */
  height: 5em;
}

.content-container {
  text-align: center;
  border: 1px solid blue;
  object-fit: contain;
}

.content-container:first-of-type {
  /* light gray background for this demo */
  /* alpha transparency information into the hex format for colors 2E as this has 8 characters */
  background-color: #8080802E;
  border: outset #D0D0D02E 4px;
}

.content-item {
  border: dashed #00000044 1px;
  padding: 0.25rem;
  margin: 0.25rem;
}

.content-container .content-item .big-me:last-of-type {
  height: 20rem;
}

<div class="container-all">
  <div class="logo-container content-container">
    <button type="button" class="content-item">
      <img class="logo-image" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
    </button>
  </div>
  <div class="content-container">
    <div class="content-item">
      Below here just to force scrolling on the sticky icon
    </div>
  </div>
  <div id="logoholder" class="xcontent-container">
    <div class="content-item">
      <img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
    </div>
  </div>
  <div class="content-container">
    <div class="content-item">
      &lt;-- Expected result --&gt;
    </div>
  </div>
  <div id="logoholder2" class="content-container">
    <div class="content-item">
      <img id="logo2" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
    </div>
  </div>
  <div class="content-container">
    <div class="content-item">
      <div class="big-me">I am big so I can force the scroll.
      </div>
    </div>
  </div>
</div>

Answer 2

#logo{
  max-width:100px;
}

#logoholder {
  position: fixed;
  left:0;
  top:0;
  background: rgb(47 47 47 / 36%);
}

<div id="logoholder">
<img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
</div>

The max-width using a percentage is causing weird behaviour, changed it to px.