Android CSS背景（svg/base64）在方向改变时水平拉伸
时间:2023-03-29 13:50 来源:网络整理 作者:默认发布 点击:次
Android CSS背景（svg/base64）在方向改变时水平拉伸 android html css cordova Android CSS背景（svg/base64）在方向改变时水平拉伸,android,html,css,cordova,Android,Html,Css,Cordova,我正在尝试使用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: 5 我正在尝试使用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; } 我还观察到，这种行为在我的桌面浏览器或某些其他安卓手机中是不可见的。我发现问题出在我的手机上的是一个以氰10.1.3为根的Galaxy s3 有没有办法阻止这种事情发生？我希望背景在任何条件下看起来都一样。看起来您对纵向/横向方向都使用了一种样式，以相对方式表示视口大小 我将使用媒体查询来检测方向，并根据它定义特定的样式来执行背景外观的微调 类似于检查实际语法： @media (orientation: portrait){ #top-bar #settings { /* Portrait styling */ } } @media (orientation: landscape){ #top-bar #settings { /* Landscape styling */ } } 希望有帮助。问题在于相关属性 background-size: 50% 50%; width: 10%; height: 100%; 如果屏幕的宽度和高度在不保持纵横比的情况下发生变化，那么它们会给您不同的总尺寸 只需将背景宽度大小保持在50%。如果未设置第二个大小，则其初始值为auto，这将保持图像的纵横比 background-size: 50%; 这应该能解决你的问题 (责任编辑：admin) |