Question

我只想在我的HTML中为1920x1080屏幕添加图像（尺寸为1920x1080）。关键是，如果我以全屏（F11的形式看到我的网站，则可以正常运行，但是如果我看到它的正常状态（使用OS窗口，浏览器的书签等），则可以缩小图像的高度。使用的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

background-size：auto auto;

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

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

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

我检查不同的网以查看我描述的效果。由于浏览器的窗口（在图像的高度上），我发现所有裁剪效果都有。我们通常不会看到1080ppx的高度，而是将其裁剪成高度。因此，我想如果我们不以全屏方式访问网络，则不可避免地要对其进行裁剪。

一个迷你解决方案是确定应该在哪里裁剪（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%;
}

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

3 个答案: