Question

我正在尝试使用HTML / CSS3 / Jquery和JS制作Phonegap应用程序。我已经制作了一些具有背景图像的div（css嵌入了base-64编码的svg图像）。但是，此背景图像会在设备方向更改时拉伸。（从肖像到风景）。

我设置了以下css属性：

#top-bar #settings {
    background: url(data:image/svg+xml;base64,[image_data]) no-repeat;
    background-size: 50% 50%;
    background-position: center;
    width: 10%;
    height: 100%;
    position: relative;
    float: right;
    right: 0;
}

我还发现在我的桌面浏览器或某些其他Android手机中看不到此行为。我的手机（我看到的问题是用Cyanogen 10.1.3植根的Galaxy s3）

有没有办法阻止这种情况发生？我希望背景在任何条件下看起来都一样。

Answer 1

您似乎对纵向/横向方向使用单一样式，以相对方式引用视口大小。

我会使用媒体查询来检测方向，并根据它定义特定的样式以对背景外观进行微调。

类似（检查实际语法）：

@media (orientation: portrait){
  #top-bar #settings {
    /* Portrait styling */
  }
}

@media (orientation: landscape){
  #top-bar #settings {
    /* Landscape styling */
  }
}

希望它有所帮助。

Answer 2

问题是相关属性。

background-size: 50% 50%;

width: 10%;
height: 100%;

如果屏幕宽度和宽度不同，那些会给你不同的总尺寸。高度在不保持纵横比的情况下发生变化！

只需将背景宽度尺寸保持在50％即可。如果没有设置第二个尺寸，则它具有初始值＆＃34; auto＆＃34;，它保持图像的纵横比。

background-size: 50%;

这可以解决您的问题。

CSS背景（svg / base64）在方向更改时水平拉伸

2 个答案: