使用 jquery mobile 调整图像大小以适应移动设备上的屏幕答案

【问题标题】：image resize to fit screen on mobile device using jquery mobile使用 jquery mobile 调整图像大小以适应移动设备上的屏幕
【发布时间】：2014-01-29 05:12:48
【问题描述】：

我想知道我们是否可以调整图像大小以适应屏幕。目前该图像适用于 iphone 5s，但无法调整到其他设备或平板电脑以适应屏幕。

我想知道是否有人知道如何调整大小以适应屏幕。

这是我的代码。

<img alt="" src="images/main1.jpg" style="width:100%;height:auto;position:absolute;z-index:500"></img>

【问题讨论】：

不建议在客户端调整大小。在提出此类问题时还要创建一个 jsfiddle.net - 例如使用 lorempixel 处理图像
它不想为我的图像使用 lorempixel，因为我必须使用我们自己的图像..
我的意思当然是在小提琴中使用 lorempixel！如果你愿意，你也可以在 jsfiddle.net 中使用你自己的图片
您能说出您在哪些设备上尝试过吗？
嗨.. 我正在使用 Worklight 移动模拟器。它配备了所有设备..平板电脑和手机..

标签： jquery css jquery-mobile ibm-mobilefirst

【解决方案1】：

您想要做的是将图像放在宽度设置为全屏宽度的某个百分比的 div 中。这将始终使图像适合屏幕的宽度。

示例代码：

<body>
    <div style="width: 100%;">
        <img alt="" src="images/main1.jpg" style="width: 100%;">
    </div>
</body>

JSFiddle：http://jsfiddle.net/5unWm/

【讨论】：

嗨..它只检查 img 元素中的 width:100%。尝试删除 div 中的样式.. 它仍然有效.. 这种方法有效但不适合所有设备..