我正在为我的网站制作一个404页面，我只需要背景图片的高度等于窗口高度。当前的CSS已经能做到这一点，但如果高度太短，它会裁剪图片的顶部和底部，而不是在两侧添加边距。我只需要图片的顶部和底部始终与窗口的顶部和底部对齐。你可以在这里查看页面及其HTML/CSS：mattmanz1.xyz/404。（像素艺术是我自己画的）

如果答案是“只学Bootstrap”，我也没问题。

这是CSS。body元素中没有任何内容

<style>
  html {
    height:100vh;
  }
  body {
   overflow:hidden;
   background-image: url("./lotnothot.png"); 
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height: 100vh;
   margin: 0; 
   padding: 0;
   image-rendering: pixelated;

</style>

解决方案

这两个特殊设置 contain 和 cover 在保持纵横比的前提下，对高度和宽度进行等效处理。前者确保图像的任何部分都不会超出背景，后者确保背景的任何部分都不会超出图像。由于你在水平方向和垂直方向上需要不同的行为，这两者都不符合你的场景。

设置背景大小的另一种方式是用长度值，这些值也可以是百分比。两个长度依次给出宽度和高度。你要让高度填充背景，所以应将其设置为 100%。至于宽度，可以使用特殊值 auto，它基本等同于“为了保持纵横比所需的一切”。（附注：将高度和宽度都设为 auto 就是使用自然尺寸。）因此

   background-size: auto 100%;

给出了你想要的结果。宽度将根据需要被裁剪或留出边距以保持纵横比。