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

Question

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

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

这是我的代码。

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

Answer 1

你想要做的是将图像放在div中，div的宽度设置为整个屏幕宽度的一定百分比。 这将始终使图像适合屏幕的宽度。

示例代码：

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

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