使用 jquery mobile 调整图像大小以适应移动设备上的屏幕
Posted
技术标签:
【中文标题】使用 jquery mobile 调整图像大小以适应移动设备上的屏幕【英文标题】：image resize to fit screen on mobile device using jquery mobile 【发布时间】：2014-01-29 05:12:48 【问题描述】：我想知道我们是否可以调整图像大小以适应屏幕。目前该图像适用于 iphone 5s，但无法调整到其他设备或平板电脑以适应屏幕。
我想知道是否有人知道如何调整大小以适应屏幕。
这是我的代码。
<img src="images/main1.jpg" style="width:100%;height:auto;position:absolute;z-index:500"></img>
【问题讨论】：
不建议在客户端调整大小。在提出此类问题时还要创建一个 jsfiddle.net - 例如使用 lorempixel 处理图像 它不想为我的图像使用 lorempixel，因为我必须使用我们自己的图像.. 我的意思当然是在小提琴中使用 lorempixel！如果你愿意，你也可以在 jsfiddle.net 中使用你自己的图片 您能说出您在哪些设备上尝试过吗？ 嗨.. 我正在使用 Worklight 移动模拟器。它配备了所有设备..平板电脑和手机.. 【参考方案1】：您想要做的是将图像放在宽度设置为全屏宽度的某个百分比的 div 中。这将始终使图像适合屏幕的宽度。
示例代码：
<body>
<div style="width: 100%;">
<img src="images/main1.jpg" style="width: 100%;">
</div>
</body>
JSFiddle：http://jsfiddle.net/5unWm/
【讨论】：
嗨..它只检查 img 元素中的 width:100%。尝试删除 div 中的样式.. 它仍然有效.. 这种方法有效但不适合所有设备..以上是关于使用 jquery mobile 调整图像大小以适应移动设备上的屏幕的主要内容，如果未能解决你的问题，请参考以下文章