Question

我正在尝试创建一个响应整个页面的响应式背景图像。我从this问题跟随CSS，这对我来说很好。

  background: url(captiveportal-back.jpg) no-repeat center center fixed;
      -webkit-background-size: 100%;
          -moz-background-size: 100%;
              -o-background-size: 100%;
                  background-size: 100%;
                      -webkit-background-size: cover;
                          -moz-background-size: cover;
                              -o-background-size: cover;
                                  background-size: cover;
}

但是我想在纵向模式下以不同的方式居中显示图像（以便将不同的图像部分聚焦在一起）。

bing网站一直这样做，每次都按照背景图像以不同的像素为中心。怎么办呢？

Answer 1

也许你需要媒体查询.. 如果您有一些代码，我们可以为您提供更多帮助。

@media all and (orientation: portrait) { 
    #div background-position { ... }
}

@media all and (orientation: landscape) { 
    #div background-position { ... }
}

Answer 2

您必须使用媒体查询来检测设备的分辨率。例如，要以纵向模式检测移动设备，最大480px：

@media only screen and (max-device-width: 480px) and (orientation: portrait) {
}

然后你将不得不改变background-size: cover。该属性不允许您更改图像的位置，因为它使用可能的最佳配置来覆盖整个空间。您将调整数字以适合您的图像。例如，如果您的图片是横向（宽度>高度），请使用：

background-size: auto 100%;

这将使图像填满整个高度。然后，您可以使用background-position放置它。例如，top将图像对齐到左侧：

background-position: left top;

Answer 3

最后发现可以通过为不同的视口创建不同的图像版本来完成。 srcset属性允许我们为各种视口选择不同的图像。正如其他人所提到的，媒体查询需要结合使用来实现这一点。

这是一篇解释端到端解决方案的微软博客文章：

https://blogs.windows.com/msedgedev/2015/10/07/using-extended-srcset-and-the-picture-element-to-tailor-your-image-to-every-device-and-layout

如何使用在肖像和图像中以不同方式居中的响应式背景图像景观？

3 个答案: