我有一個布局和css之間的問題 firefox - 112.0.2 和 鉻

我在codepen上創(chuàng)建了一個小型的自包含樣本 https://codepen.io/alex116/pen/JjmZPJX

.dashboard {
  display:flex;
  justify-content: center;
  align-items: center;
}
.graphic {
  display:flex;
  justify-content: center;
  align-items: center;
}
.image {
  width: 100%;
}

<div class="dashboard">
  <div class="container">
    <div class="graphic">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">
    </div>
  </div>
</div>

這是我試圖解釋的

它沒有在firefox中顯示的原因是因為你的儀表板沒有固定的高度，所以默認(rèn)為0。 因此，當(dāng)你的子元素(比如image)試圖占據(jù)一個百分比寬度時，這確實有效，但是因為高度不存在，所以它不會顯示出來。

所以你可以在你的儀表板上設(shè)置一個固定的高度，但是你也必須記住，當(dāng)你設(shè)置一個百分比寬度/高度時，它取父的%。

背景顏色很容易可視化，所以試著玩玩看會發(fā)生什么(或者通過開發(fā)工具)。

.dashboard {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: skyblue;
  height: 10rem;
}

.container {
  height: 100%;
}

.graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hotpink;
  height: 100%;
}

.image {
  height: 100%;
}

<div class="dashboard">
  <div class="container">
    <div class="graphic">
      <img class="image" src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg">
    </div>
  </div>
</div>

每當(dāng)你需要處理圖像時，讓它們有反應(yīng)。一旦完成，用父div控制高度和寬度。這將確保圖像在所有設(shè)備上以相同的分辨率顯示。此外，在多個設(shè)備上，您只需要更改父div的高度和寬度，就可以使圖像看起來更好，而不用擔(dān)心圖像像素化。這適用于所有的瀏覽器。

響應(yīng)圖像

CSS:

// change the size of parent div to modify image
.graphic {
  width: 5rem;
  height: 5rem;
}


.image {
  width: 100%;
  height: auto;
}