使用纯CSS调整<img/>的大小以适应最小维度的可用屏幕空间

Question

我想以最大化所用屏幕空间的方式显示图像，同时仍然显示整个画面。图像可以是纵向或横向，并且应该在两个方向的显示器上完全可见。

目前我正在为我的图片使用这些CSS规则：

max-width: 100%;
height: auto;

在纵向显示上查看风景图像时，这项工作就可以了，但在横向显示上会中断：

有没有办法（最好只在现代浏览器上使用CSS）使图像适合所有情况？