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

Question

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

然后在横向模式下，图像将具有更宽的外观：

Answer 1

对不起，如果我没有发布任何代码..但感谢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*****/
}

我不确定是否会遇到任何问题，如果你们有任何输入/帮助来更好地编码，那么我们将不胜感激。谢谢！

编辑：事实证明我必须使用

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

获得我想要在风景上工作的内容

Answer 2

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

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

＆＃13;

＆＃13;

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);
  }
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;