css - 在具有不同宽高比的屏幕上处理 CSS 背景图像。 (16 :9 -> 9:16)

Question

我有一个带有背景图片的网页:

    body {
        background-image    : url("https://example.com/image.png");
        background-size     : cover;
        background-repeat   : no-repeat;
    }

这适用于 16:9 屏幕，但对于手机 (9:16)，图像仅覆盖(某种程度上)屏幕的一半!

如何根据宽高比指定不同的图片？

Answer 1

你可以试试这个。可能是你的图片位置有问题

body{
  background: url(http://www.planwallpaper.com/static/images/nature-wallpapers-hd.jpg) no-repeat top center fixed; 
   -webkit-background-size: cover;
      -moz-background-size: cover;
        -o-background-size: cover;
           background-size: cover;
}

展示这个，它可以帮助你理解background-size CSS background image to fit width, height should auto-scale in proportion