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

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>

CodePudding user response：

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

CodePudding user response：

Declaring max-width: 20%; on an id or class on the image element is instructing the browser to make the image 20% of its initial size, which scales it way down. You should use width: 100%; so it fills up its original size then set the max-width on the parent div.

I changed it to max-width: 5.4%; on #logoholder to match your expected result on the full-page view. Remember % is a dynamic width so it will shrink/grow with the viewport.

#logo {
  width: 100%;
}

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

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

CodePudding user response：

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 >
  <div >
    <button type="button" >
      <img  src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
    </button>
  </div>
  <div >
    <div >
      Below here just to force scrolling on the sticky icon
    </div>
  </div>
  <div id="logoholder" >
    <div >
      <img id="logo" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
    </div>
  </div>
  <div >
    <div >
      &lt;-- Expected result --&gt;
    </div>
  </div>
  <div id="logoholder2" >
    <div >
      <img id="logo2" src="https://www.google.com/gmail/about/static-2.0/images/logo-gmail.png">
    </div>
  </div>
  <div >
    <div >
      <div >I am big so I can force the scroll.
      </div>
    </div>
  </div>
</div>