在没有全屏浏览器的情况下在图像上显示全高(使用封面)

Question

我只想在我的 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;
}

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

Answer 1

背景大小：自动自动;

这将保留原始大小(并将在边缘剪裁(。"封面"始终调整图像大小以覆盖容器。

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

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;
  }
}

Answer 2

我检查不同的网络以查看我描述的效果。总之，我发现由于浏览器的窗口(在图像的高度(而存在裁剪效果。我们通常看到高度为1080px的图像，而不是完整的1080px高度。所以我想如果我们不全屏访问网络，就不可避免地要裁剪一下。

一个迷你解决方案是决定应该在哪里裁剪它(background-position: center top;裁剪底部(。另一种是使网络在顶部有边距(不建议使用其他方法访问的人：移动，全屏等(

Answer 3

也许可以做你想要的样式是 background-size: auto 100%; ，所以它将浏览器的高度与背景的大小相结合，保持比例宽度。

尝试使用此样式，因此图像高度始终是浏览器的高度。不好的部分是，如果图像的宽度不大，则两侧可能会有白线。

html {
  height: 100%;
  background: url("image.jpg");
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}