Css 根据设备方向更改图像

我正在为一家本地公司使用PhoneGap构建一个基本的web应用程序。我已经为应用程序顶部的标题/横幅创建了两个图像。一个针对纵向方向进行了优化，另一个针对横向方向进行了优化。 我希望能够显示其中一个，这取决于设备的固定方式。我一直在阅读有关媒体查询的文章，坦率地说，对于我的需求来说，这有点过于复杂了，因为jquerymobile将为我处理其余的功能，而我只为整个应用程序使用一个CSS

---

是否有人可以添加几行简单的代码来帮助解决此问题？

您可以使用CSS媒体查询进行纵向和横向定位，这一点都不复杂：

@media screen and (orientation: portrait) { ... }
@media screen and (orientation: landscape) { ... }

使用这些媒体查询，您可以覆盖任何方向的背景图像

正式文件：

有两种使用方法：

假设您有

类

标题
：

@media screen and (orientation: portrait)
{
    div.header { background-image:url(image1.jpg); }
}
@media screen and (orientation: landscape)
{
    div.header { background-image:url(image2.jpg); }
}

或者，您可能希望使用
标记。在这种情况下，您将需要其中两个，并使用CSS规则仅隐藏/显示一个。比如说，
标记分别具有类
标题栏
和
标题肖像
：

@media screen and (orientation: portrait)
{
    .header-land { display:none; }
    .header-portrait { display:inline-block; }
}
@media screen and (orientation: landscape)
{
    .header-land { display:inline-block; }
    .header-portrait { display:none; }
}

这是一个关于如何使用媒体查询的答案，这是一个非常简单的解决问题的方法。但是一个先决条件是可以将图像显示为css背景，而不是

伪码

.my-banner {
  ...declarations like:
  background-position: 
  border: 
  margin: 
  padding: 
}
@media all and (max-width: 320px) {
  .my-banner {
  background-image: url(portrait.png);
}
@media all and (min-width: 321px) {
  .my-banner {
  background-image: url(landscape.png);
}

如果我有两张图像image1.jpg和image2.jpg，我如何将上述代码用于这些文件？这可能会导致一些问题：在nexus 7上，如果键盘显示，屏幕将从纵向变为景观谢谢，那么如何从HTML调用这些图像？最小和最大宽度并不能精确确定方向。此外，320px仅适用于iPhone屏幕。@keaukraine是的，使用横向和纵向作为方向可能更好。@user1942412将这些声明添加到css文件中。上传图像并指向它们的路径。在我的示例中，我假设css文件和图像位于同一文件夹中。例如，如果您将图像放在外部的另一个文件夹中：
images/trait.png
和
images/landscape.png
…您使用此路径
background image:url（images/landscape.png）这对你有帮助吗？请注意，@keaukraine还提供了一个很好的示例，如果您选择使用