根据设备方向更改图像

Posted 2023-03-06

技术标签:

【中文标题】根据设备方向更改图像【英文标题】：Changing images depending on device orientation 【发布时间】：2012-12-16 16:11:06 【问题描述】：

我正在为一家本地公司使用 PhoneGap 构建一个基本的网络应用程序。我为应用程序顶部的标题/横幅创建了两个图像。一种针对纵向进行了优化，一种针对横向进行了优化。我希望能够根据设备的握持方式显示其中一个。我一直在阅读有关媒体查询的内容，坦率地说，它对于我的需求来说有点过于复杂，因为 JQuery mobile 会为我处理其余的功能，而我只为整个应用程序使用一个 CSS。

有没有人可以添加几行简单的代码来帮助解决这个问题？

【问题讨论】：

【参考方案1】：

纵向和横向都可以使用 CSS 媒体查询，一点也不复杂：

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

使用这些媒体查询，您可以针对任何方向覆盖 background-image。

官方文档：http://www.w3.org/TR/css3-mediaqueries/#orientation

有两种使用方式：

假设你有 <div> 和 header 类：

@media screen and (orientation: portrait)

    div.header  background-image:url(image1.jpg); 

@media screen and (orientation: landscape)

    div.header  background-image:url(image2.jpg);

或者，您可能希望使用<img> 标签。在这种情况下，您将需要其中两个，并且仅使用 CSS 规则隐藏/显示一个。假设<img> 标签分别有header-land 和header-portrait 类：

@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;

【讨论】：

所以说我有 2 张图片 image1.jpg 和 image2.jpg，我该如何使用上面的代码来处理这些文件？这可能会导致一些问题：在nexus 7，如果键盘显示，屏幕会从纵向变为横向【参考方案2】：

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

伪代码

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

【讨论】：

谢谢，那么如何从我的 html 中调用这些图像？最小和最大宽度不能精确地确定方向。此外，320px 仅适用于 iPhone 的屏幕。 @keaukraine 是的，使用横向和纵向可能会更好。 @user1942412 将这些声明添加到您的 css 文件中。上传图像并指向它们的路径。在我的示例中，我假设 css 文件和图像位于同一个文件夹中。例如，如果您将图像放在外面的另一个文件夹中：images/portrait.png和images/ landscape.png ...您使用此路径background-image: url(images/landscape.png); 这对您有帮助吗？请注意，@keaukraine 还提供了一个很好的示例，如果您选择将图像包含在 <img ... /> 中，如何解决该问题