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

Question

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

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

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

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

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

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

Answer 1

如果将 .slideshow-elem img 更改为

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

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