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

Question

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

我需要图像纵横比保持不变，但如果在大屏幕上查看，图像可以比其原始分辨率大。

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

图像必须在垂直和水平方向居中放置在容器内。

这是我要实现的目标的示例。

原文由 Breageside 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

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

这里的 工作示例

在此示例中， 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;

在这里查看

原文由 freewheeler 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 object-fit CSS 属性，你可以在没有容器的情况下做到这一点：

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

查看 浏览器支持。

原文由 Aidan Feldman 发布，翻译遵循 CC BY-SA 4.0 许可协议