我需要图像采取容器的整个宽度，除非结果的高度大于可用容器的视口高度。

基本上，我希望图像是响应性的，但它应该仍然适合屏幕。如果它不适合屏幕，它应该缩小，水平居中，最好在它的侧面添加黑色瓷砖。

当前，我的CSS类看起来是这样的：

.img-responsive{
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: auto;
}

我试着在图像或专用容器上使用max-height,但纯CSS似乎无法实现此功能。

澄清：

1. 我事先不知道图像的尺寸，所以不能将它们放入一个预设大小的容器中。
2. 基本上，我的目标是使图像始终在屏幕上完全可见（如果滚动到图像），并占据尽可能大的表面。

下面是一个更详细的例子：

假设我有一个包含大量内容的可滚动容器。容器占用了整个视区宽度（假设是500px)，容器的可用可见高度是整个视区高度减去一个navbar高度（假设是1000px)。

我无法预先知道容器的可见尺寸是多少，因为它总是可以改变的。

容器里面有任何东西，文本，图像等等。

现在，对于给定的图像，以下是可能的场景：

• 如果图像为500x800，则应按原样显示，因为它占用了整个可用宽度，且高度不大于容器的可见高度。
• 如果图像为500x2000，则应将其缩放为250x1000，并水平居中。这将占用整个可见容器的高度，并保持图像的纵横比
• 如果图像为250x300，则应将其缩放为500x600，占用整个可用宽度
• 如果图像为200x500，则应将其缩放为400x1000，占用整个可用高度
• 如果图像为1000x1000，则应将其缩放为500x500，占用整个可用宽度

这里有一个JSFiddle解释这个问题