根据设备方向更改背景位置

Question

任何人都可以告诉我如何实现这个技巧，当在肖像上使用智能 phone 时，您的网页上会得到这个背景：

然后在横向模式下，图像看起来会更宽，如下所示：

Answer 1

为了彻底，有很多方法可以做到这一点。 JavaScript 在您设置 img 源的某些情况下可能更有帮助。也就是说，在大多数情况下，您需要使用 CSS。您可以在此处阅读所有 CSS 选项：

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

body {
  background: url(https://placehold.it/500x1000);
  background-size: cover;
  background-position: center center;
}

@media screen and (orientation: landscape) {
  body {
    background: url(https://placehold.it/1000x2000);
  }
}

@media screen and (min-width: 1200px) {
  body {
    background: url(https://placehold.it/2000x3000);
  }
}

<!-- body tag is included by default... -->

<!-- hey StackSnippet warriors(trolls)... key example here of a bad time to use it -->

Answer 2

如果我没有发布任何代码，我很抱歉。但是感谢 sherrifderek 我已经实现了我想要的，而无需使用媒体查询，仅使用

body {
background: url(../img/intro-bg2.jpeg);
background-repeat:no-repeat;
-webkit-background-size:cover;
   -moz-background-size:cover;
     -o-background-size:cover;
        background-size:cover;
background-position:center top; /*****Just added this*****/
}

我不确定运行是否有任何问题，如果你们有任何 inputs/help 可以更好地编写代码，我们将不胜感激。谢谢！

编辑：原来我不得不使用

@media screen and (orientation: landscape) {
 body {
        background-size:cover;
        background-position:center top;
 }
}

得到我想在景观上工作的东西

根据设备方向更改背景位置

Change background position based on device orientation

html

css

jquery

positioning