Html 不使用全屏浏览器在图像上显示全高（使用封面）

我只想在我的html中为我的1920x1080屏幕添加一个图像（大小为1920x1080）。问题是，如果我在全屏（

F11

）上看到我的网页，它工作得很好，但如果我正常地看到它（操作系统的窗口、浏览器的书签等），它会降低图像的高度。使用的CSS代码如下所示：

html,body{
 margin:0;
 padding:0;
 height:100%;
 overflow: hidden;
 background-image: url("image.jpg");
 background-color: white;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

---

有没有办法在没有全屏的情况下完美地获得图像？或者知道我的窗口和浏览器需要多少高度？因为，如果不是，那么其他具有相同显示器屏幕大小，但具有不同浏览器和操作系统的人可能会有不同的结果。

背景大小：自动

这将保留原始大小（并将在边缘处剪裁）。“Cover”始终调整图像大小以覆盖容器

或者，您可以检查用户的屏幕大小并相应调整背景大小

html, body {
    background-size: auto auto;
}

@media only screen and (max-height: 720px) {
  html, body {
    background size: 1280px 720px;
  }
}

@media only screen and (max-height: 480px) {
  html, body {
    background size: 800px 480px;
  }
}

等等

您还可以在css中为容器指定“最小高度”或“最小宽度”，这样即使屏幕大小比您指定的稍小，图片也不会被剪切

例如：

@media only screen and (max-height: 480px) {
  html, body {
    background size: 800px 480px;
    min-width: 800px;
    min-height: 480px;
  }
}

---

我检查了不同的网页以查看我描述的效果。在所有我发现有一个裁剪效果，因为浏览器的窗口（在图像的高度）。我们通常看到的是高度被裁剪的图像，而不是完整的1080px高度。所以我想，如果我们不全屏访问网络，就不可避免地要对其进行一些裁剪

---

一个小型解决方案是决定裁剪位置（

背景位置：中间顶部；

裁剪底部部分）。另一种是在网页顶部留一个空白（不建议使用其他方式访问的人：移动、全屏等）。

可能可以做你想做的事情的风格是

背景大小：自动100%，因此浏览器的高度与背景大小成正比，保持比例宽度

尝试使用此样式，使图像高度始终为浏览器的高度。不好的地方是，如果图像没有大的宽度，它的侧面可能有白线


html{
身高：100%；
背景：url（“image.jpg”）；
背景色：白色；
背景位置：中心；
背景重复：无重复；
背景尺寸：自动100%；
}
我尝试了第一部分，但它一直在裁剪图像高度。如果我想在覆盖屏幕所有宽度的同时保持图像的x、y比例，我认为没有任何解决方案，对吗？问题是，我只测试相同的屏幕大小，但由于不同的操作系统和浏览器的menuI使用可能的解决方案更新了我的答案，如果您为容器设置了最小高度和宽度，它将保持与指定背景相同的大小，并且仅当用户的显示在两个预设媒体查询之间时才会跳出屏幕（例如600px而不是480或720）。在这些情况下，您必须允许溢出，或写入另一个预设，但通常最常见的显示尺寸是人们使用的。当然，如果您希望720p以上的屏幕具有均匀负载，您还必须这样指定：@media only screen和（最大高度：1080px）{…}->1200px->2160px->等。