Html 如何使图像根据高度自动调整大小以适应浏览器窗口

我试图使一个图像适合浏览器窗口的高度，并对窗口大小作出动态响应

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

我不希望图像溢出屏幕外，产生一种皱眉效果

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

---

若要执行类似示例的操作，可以使用

背景尺寸：封面

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

这样可以确保背景图像覆盖所有内容。没有可见的背景色，但是根据屏幕的比例，图像的大部分可能会被切断

---

还可以看到这个插件：

目前还不清楚您尝试了什么，我们也没有看到任何代码。不管怎样，我都会尽力回答，也许这会对你有所帮助

首先，当您使用响应性布局时，请始终尝试使用调整元素的大小。这有助于您保持内容与浏览器大小的相对关系，无论大小和屏幕大小如何

此代码可能有助于将响应图像插入到站点：

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，您可以轻松地将图像居中；垂直对齐：中间对齐；文本对齐：居中到DIV

另一个解决办法是：

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

使用CSS属性查看它，您可以不使用容器：

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

请参阅。
我正在尝试…
。分享你正在尝试的东西。这是非常容易做到的
高度：100%；宽度：自动
或使用
背景尺寸：封面
试试这个js插件@Jason，它是
背景尺寸：封面
和
背景位置：中间
。制作这两行代码比包含一个依赖jQuery编写这两行代码的插件要好。感谢您的深入回答。这正是我要找的。如何在窗口不开始滚动的情况下在这个div周围放置一个白色的边距？我只是使用黄色背景来演示div与图像的相对大小。选中@Breageside，你可以使用outline:{anywidth}solid#fff@freewheeler，你的回答救了我的命！谢谢最大宽度、高度和最大高度的组合就可以了。我想你指的是
背景大小：contain
。
img {
  height: 100vh;
  width: 100%;
  object-fit: contain;
}