用于使图像响应包含元素的宽度和可见高度的CSS

Question

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

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

当前，我的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解释这个问题

Answer 1

我建议不要为此使用IMG标记。而是使用div标记，然后使用背景图像属性。下面是这方面的代码，将容器大小设置为您喜欢的任何大小：

<div id="container"></div>

<style>
width: 500px;
height: 500px;
background-image: url('your url');
background-size: contain;

</style>

background-size:contain是最好的方法。它将图像缩放到div中图像所能达到的最大值，而不会使其大于其本机大小。希望这有帮助

编辑：忘记添加，如果您希望它在容器的中心，这样当图像不适合容器的全部大小时，它周围有空白，您可以使用css代码background-position：center center；