在Firefox中调整窗口大小时，图像宽度不会改变

Question

I created a Fiddle here来说明问题。只需尝试在Safari / Chrome与Firefox中垂直调整预览窗口的大小。

我需要将幻灯片的图片放在容器\numberline中。 它们中的一些很高，可以填满幻灯片的整个高度，其中一些不是，这就是为什么我不能给它们固定的100％高度。我的目标是垂直居中那些不够高的图像，让其他图像垂直填充整个幻灯片。所有这一切同时保持纵横比和动态宽度。

我使用图片上的.slideshow-elem属性和max-height容器完成了此操作。它适用于Chrome和Safari，但不适用于Firefox。

有关如何在Firefox中完成此操作的任何想法？非常感谢！

编辑：在水平调整大小时，我也不一定需要动态高度。然后可以裁剪图像。因此我更新了小提琴...

编辑2：好的，所以我在.slideshow-elem上取出了max-width: 100%;，事实证明这就是我所要做的......现在图像正确缩放Firefox也是。但有人可以向我解释一下吗？

Answer 1

如果您将.slideshow-elem img更改为

.slideshow-elem img {
  max-height: 100%;
  width: 100%;
}

它会在Firefox中正确扩展，从你的问题来看，你最关心的是保持高度，所以我认为没有设置为max-width不是问题。