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

Question

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

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

这适用于 16:9 屏幕，但对于移动设备 phone(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

Answer 2

这总是会发生，因为 background-size: cover 浏览器会尝试用相同的背景填充元素。您仍然可以使用 background-position 进行一些调整，但在这些情况下并没有太大帮助。

更好的是，您可以使用媒体查询根据屏幕尺寸使用不同的背景。

类似于

@media only screen and (max-width: 640px) {
  background: url(../images/mobile-background.jpg) no-repeat center center;
  background-size: cover;
}

@media only screen and (min-width: 641px) {
  background: url(../images/large-background.jpg) no-repeat center center;
  background-size: cover;
}

通过这种方式，您可以 select 两种情况下的特定图像，其中一些好处包括更合适的图像大小，从而为用户带来更快的加载速度和更少的带宽消耗。这也会带来更好的页面速度结果。

Answer 3

这涉及 CSS : https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio 中的纵横比。谢谢@GabyakaG.Petrioli

/*background image to load for 9:16 display*/
    @media (min-aspect-ratio: 9/16) {
        body {
            background-image    : url("https://example.com/image1.png");
        }
    }

/*background image to load for 16:9 display*/
    @media (min-aspect-ratio: 16/9) {
        body {
            background-image    : url("https://example.com/image2.png");
        }
    }

/*Common properties can go here*/
    body {

        background-size     : cover;
        background-repeat   : no-repeat;
    }

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

Dealing with CSS background images on screens with different aspect ratios. (16:9 -> 9:16)

css

background-image

aspect-ratio

screen-orientation