HTML5的跨浏览器可扩展图像

Question

我正在学习如何在HTML5和jQuery Mobile中构建移动Web应用程序。我遇到的一个问题是，当浏览器的大小发生变化时，页面上的图像会自行调整大小。我在这里发布了很多方法，但似乎没有一个方法适合我。我不希望图像成为背景图像。

这就是我的目标;具有下面的菜单内容的图像。示例：Disney (Mobile Site)

当您在上面的链接上调整浏览器大小时，图片会完美适应。

我目前的HTML代码如下：

<div id="picture">
    <img src="images/num2.jpg" id="image2">
</div>

我目前的CSS代码是：

img {
    width: 100%;
}

我尝试了很多变化，例如将最小/最大高度和宽度添加到100％/自动组合，但没有运气。

我对此很新，所以如果有答案请保持基本！

非常感谢提前！

**

编辑：固定它！

**

问题在于我使用了两个样式表。我的HTML5页面是在jQuery Mobile的后面运行的，它带有自己的CSS文件（从jQuery Mobile站点复制的脚本）。我所做的所有更改都是在我创建的自己的CSS文件中。我通过手动下载jQuery Mobile CSS文件并将其添加到我的站点文件夹，然后在默认代码下面的同一文件中进行更改来解决了这个问题。傻傻的我知道，但绊了我多年！

Answer 1

你需要

#picture {width:100%}

您的图片是其容器宽度的100％，但在您的情况下，您的容器不够大。

Answer 2

在img width="100%"

上添加attr

<img src="images/num2.jpg" id="image2" width="100%">

图像将继承父div的宽度。