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

Question

我正在尝试使图像在高度方面适合浏览器 window，并动态响应 window 尺寸。

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

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

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

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

Answer 1

要像您的示例一样执行操作，您可以使用 background-size:cover。

cover
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

这可以确保背景图片覆盖所有内容。将看不到 background-color，但是根据屏幕的比例，您的图像的很大一部分可能会被切掉

另请参阅此插件：https://plnkr.co/edit/khXfLdsUV5aIJlTo4SSl?p=preview

Answer 2

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

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

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

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

工作示例here

在此示例中，div 大小为 window 高度和宽度的 80%，因此它永远不会超出视口。最大限度。 img 的度量是 div 的 100%，而 height:auto; 确保它保持其纵横比。然后图像适合 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 3

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

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

参见browser support。

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

How to make an image auto resize to fit browser window with relation to height

html

css

image

responsive-images