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

【问题标题】：CSS background (svg/base64) gets stretched horizontally upon orientation changeCSS 背景（svg/base64）在方向改变时水平拉伸
【发布时间】：2014-03-16 12:08:19
【问题描述】：

我正在尝试使用 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 手机中不可见。我的手机（我发现问题是 Galaxy s3 以氰 10.1.3 为根）

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

【问题讨论】：

标签： android html css cordova

【解决方案1】：

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

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

类似（检查实际语法）：

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

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

希望对你有帮助。

【讨论】：

【解决方案2】：

问题是相对属性。

background-size: 50% 50%;

width: 10%;
height: 100%;

如果屏幕宽度和高度在不保持纵横比的情况下发生变化，它们会为您提供不同的总尺寸！

只需将背景宽度大小保持在 50%。如果没有设置第二个大小，它的初始值是“auto”，保持图像的纵横比。

background-size: 50%;

这应该可以解决您的问题。

【讨论】：