0

我只是在学习如何在 HTML5 和 jQuery Mobile 中构建移动网络应用程序。我遇到的一个问题是，当浏览器的大小发生变化时，页面上的图像会自行调整大小。我已经尝试了许多在此处发布的方法，但似乎没有一个对我有用。我不希望图像成为背景图像。

这就是我的目标；具有以下菜单内容的图像。示例：迪士尼（移动网站）

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

我当前的 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 文件并将其添加到我的站点文件夹中解决了这个问题，然后在默认代码下方的同一个文件中进行更改。我知道很傻，但把我绊倒了好久！

4

2 回答 2

1

你需要

#picture {width:100%}

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

于 2013-08-20T19:15:17.077 回答
0

width="100%"在图片上添加attr

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

图像将继承父 div 的宽度。

于 2013-08-22T14:52:42.023 回答