在没有全屏浏览器的情况下在图像上显示全高（使用封面）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在没有全屏浏览器的情况下在图像上显示全高（使用封面）相关的知识，希望对你有一定的参考价值。
我只想在我的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;
}
有没有办法在没有全屏的情况下完美拍摄图像？或者知道我的窗口和浏览器需要多少高度？因为，如果没有，那么具有相同监视器屏幕大小但具有不同浏览器和操作系统的其他人可能会有不同的结果。
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;
}
}
我检查不同的网，看看我描述的效果。总之，我发现由于浏览器的窗口（在图像的高度）有裁剪效果。我们通常会看到高度裁剪的图像，而不是完整的1080px高度。所以我想如果我们不以全屏方式访问网页，那么将其裁剪一点是不可避免的。
一个小的解决方案是决定在哪里播种它（background-position: center top;作物底部）。另一种方法是将网页设置在顶部（不建议使用其他方法访问的人：移动，全屏等）
可能做你想要的样式是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%;
}以上是关于在没有全屏浏览器的情况下在图像上显示全高（使用封面）的主要内容，如果未能解决你的问题，请参考以下文章