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

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%，因此它永远不会超出视口(viewport)。最大限度。 img 的尺寸是 div 的 100% 并且 height:auto; 确保它保留其纵横比。然后图像将 div 调整到允许的最大值。您可以通过设置 display:table-cell; 轻松地将图像居中；垂直对齐:中间； text-align:center; 到 DIV。

另一个解决方案是:

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

检查一下 here