image width=100% not working in firefox within nested flexbox

Question

我在布局和 css 之间遇到问题
火狐 - 112.0.2
和
铬 - 112.0.5615.165

我在这里在 codepen 上创建了一个小的独立示例 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>

在 chromium 中，我看到 svg 图像，而在 firefox 中，图像的宽度为 0px。

为什么在 Firefox 中会发生这种情况？这是两个浏览器中的错误吗？我在写无效的 css 吗？

我不想更改 html 结构，但我很乐意修改 css

这是我正在进行的一个更大项目的一部分，我已经将问题减少到这个片段。此布局中有更多垂直列，但我已删除它们以解决问题的核心。

Answer 1

这是我试图解释的

它没有出现在 firefox 中的原因是因为你的仪表板没有固定的高度，所以它默认为 0。 因此，当您的子元素（如图像）尝试占用一定百分比的宽度时，这确实有效，但由于高度不存在，因此不会显示出来。

所以你可以在你的仪表板上设置一个固定的高度，但是你还必须记住，当你设置一个百分比宽度/高度时，它会占用父级的百分比。

使用背景颜色很容易可视化，所以尝试使用这些颜色看看会发生什么（或通过开发工具）。

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

Answer 2

每当你需要处理图像时，让它们响应。完成后，使用父 div 控制高度和宽度。这将确保图像在所有设备上以相同的分辨率显示。此外，在多个设备上，您只需更改父 div 的高度和宽度即可使图像看起来更好，而无需担心图像像素化。这适用于所有浏览器。

响应图像

CSS：

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


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