包含調整大小的影像的div，寬度未調整為影像的寬度

我有div一個fixed position包含我設定的影像，max-width:20%所以它被縮小了。的height被div縮放以匹配影像，但width不是，它看起來與width影像的初始大小相同。

我可能遺漏了一些基本的東西，但不能真正理解這一點。

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

uj5u.com熱心網友回復：

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

使用max-width百分比會導致奇怪的行為，將其更改為 px。

uj5u.com熱心網友回復：

在 image 元素上宣告max-width: 20%;id 或 class 是在指示瀏覽器將影像設為其初始大小的 20%，從而將其縮小。您應該使用width: 100%;它來填充其原始大小，然后max-width在父 div 上設定。

我將其更改為max-width: 5.4%;on#logoholder以匹配您在整頁視圖上的預期結果。請記住，它%是動態寬度，因此它會隨著視口縮小/增長。

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

uj5u.com熱心網友回復：

為了清晰起見，我設定了一些邊距和邊框 - 并將原始影像保留在原處（第一個是此處播放的影像）

為了簡單起見，我建議使用 flex 顯示，然后我們可以將容器設定為一個大小，并將影像的高度設定為我們想要的相對值（參見 CSS 中的注釋）

我將按鈕設定在“頂部”，但它也可以是相對位置并解決“固定”位置問題。

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>

標籤：html css

上一篇：更改帶有按鈕的框

下一篇：如何創建兩列，其中一列成形？