图像宽度=100% 在嵌套的 flexbox 中在 Firefox 中不起作用-解网

问：

我在 firefox - 112.0.2 和 chromium - 112.0.5615.165 之间的
布局
和
css 方面遇到了问题

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

这是我正在从事的一个更大项目的一部分，我已经将问题简化为这个片段。此布局中有更多的垂直列，但我删除了它们以触及问题的核心。

html css 火狐 chromium

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

嗨，@rishi，这似乎可以使它在 firefox 中可见，但它的缺点是从侧面压扁时不会缩放。从技术上讲，它使它出现是正确的，但它的行为方式不同。我真的希望它在窗口较小时进行缩放。这就是 flexbox 通常做得很好的原因，但由于某种原因，将高度设置为 100% 就可以使它即使在挤压时也始终保持该尺寸。Chrome 在我提出的第一个示例中做了我想要的。

0赞 rishi 5/13/2023

@Alex 如果你想让它缩放到更小的尺寸上，我相信设置会成功。因为它会根据其父级进行缩放，即使在宽度轴上也是如此。width: 100%;.image

0赞 Sandy M 5/12/2023 #2

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

响应式图像

CSS格式：

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


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

上一个：在 Javascript 中，使用鼠标垫时如何在基于 Firefox 和 Chromium 的浏览器上实现类似的放大/缩小行为？

下一个：SVG 图像圆圈描边图案正在铬上切割

图像宽度=100% 在嵌套的 flexbox 中在 Firefox 中不起作用

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

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

评论

评论