如何保持背景图像的宽高比，并分别选择宽度和高度之间哪一边设置为标准？

Question

我想在背景图片上做的是根据浏览器尺寸与背景图像的比例来扩展宽度或高度。

在这一个图像中（几乎）没有拉伸;我希望图像保持原始比例。基本上，背景图像的宽度和高度将遵循浏览器屏幕的宽度和高度。

在此屏幕截图中，图像必须向上和向下展开，因为其宽高比大于原始图像。超出的部分应该在浏览器窗格之外。

在这一个中，宽/高比率较小;只要保持其比例并使图像高度适合浏览器的高度，图像就应该向左和向右拉伸。

希望您能理解我想要做的事情。我想我可能必须使用类似x:0, y:0, concatR:=, modR:=, powR:= x:1, y:9, concatR:y, modR:y, powR:y x:9, y:1, concatR:x, modR:x, powR:x x:1, y:999, concatR:y, modR:y, powR:y x:999, y:1, concatR:x, modR:x, powR:x x:111, y:9, concatR:y, modR:y, powR:y x:9, y:111, concatR:x, modR:x, powR:x x:91, y:19, concatR:x, modR:y, powR:x x:19, y:91, concatR:y, modR:x, powR:y 语句的内容来检测浏览器比例，并分别改变哪一面适合图像。或者是否需要其他一些技术来完成这项任务？

Answer 1

没有Javascript的帮助，我建议使用：

body {
  background-image: url(image.jpg);
  background-position: 50% 50%;
  background-size: cover;
}

background-position: 50% 50%会使图像水平和垂直居中。 background-size: cover会使图像覆盖整个身体。

Demo