flexbox 中的图像在 Firefox 中无法正确调整大小

Question

我正在尝试使用 flexbox 制作交互式滚动画廊。

https://www.nickiwells.com/image-issue/#pictures

布局在 Chrome 和 Safari 中看起来与预期相同，但在 Firefox 中，图像并没有缩小到容器的大小，而是以完整的图像大小显示。

问题似乎与包含 .picturesSection.activeSection div 的高度有关。

如果有人能解释这种行为，将不胜感激。

非常感谢。

Answer 1

你需要在img标签上设置width和object-fit

img{
  width: 300px;//your desire width % also
  object-fit: contain;
}