如何使图像自动调整大小以适应与高度相关的浏览器窗口

Question

我正在尝试使图像适合浏览器窗口的高度，并动态响应窗口大小。

我需要图像宽高比保持不变，但如果在大屏幕上观看，图像可能比原始分辨率大。

我不希望图像溢出屏幕并产生掠夺效果。

图像必须在容器内部垂直和水平保持居中。

Here is an example of what I am trying to achieve.

Answer 1

目前尚不清楚您到目前为止尝试了什么，我们也看不到任何代码。无论如何我都会尝试回答，也许它会帮助你。

首先，当您使用自适应布局时，请始终尝试使用viewport height and width调整元素的大小。这有助于您保持内容相对于浏览器大小 - 无论是调整大小还是屏幕大小。

此代码可能有助于您将响应式图像插入您的网站：

div {
   width:80vw;
   height:80vh;
}
img {
   max-width:100%;
   height:auto;
   max-height:100%;
}

工作示例here

在此示例中，div大小为窗口高度和宽度的80％，因此它永远不会超出视口。最大。 img的度量值是保留其宽高比的div和height:auto;的100％。然后图像适合div允许的最大值。通过将display:table-cell; vertical-align:middle; text-align:center;设置为DIV，您可以轻松地使图像居中。

另一种解决方案是：

 background-image:url(' ');
 background-size:contain;
 background-repeat:no-repeat;
 background-position:center;

查看here

Answer 2

要执行类似您的例子，您可以使用background-size:cover。

cover

     

缩放图像，同时保持其固有的宽高比（如果有），使其最小尺寸，使其宽度和高度都可以完全覆盖背景定位区域。

这可确保背景图像覆盖所有内容。没有可见的background-color，但根据屏幕的比例，您的图像的很大一部分可能会被切断

另见这个plunker：https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

Answer 3

使用object-fit CSS属性，可以在没有容器的情况下进行操作：

img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
}

请参见browser support。