1

我是这个社区的新手：我正在尝试使用 jQuery Mobile 创建一个简单的 Windows Phone 风格的 GUI。

我想用图像创建一些图块，然后我必须将它们调整为屏幕宽度：我尝试使用样式规则“style="width: 100%;"”来做到这一点，但图像的边框太重了。

这是我的代码：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tiles Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">

    <link rel="stylesheet" href="Framework\Theme\Metro.css" />
    <link rel="stylesheet" href="Framework\JQM\S-1.3.0.css" /> 

    <script src="Framework\JQ\1.10.1.js"></script> 
    <script src="Framework\JQM\1.3.0.js"></script>

</head>
<body>
    <div data-role="page" id="Menu">

        <div data-role="header" id="Menu\Header">

            <h1>
                Menu
            </h1>

            <a href="#" data-role="button" data-icon="gear" data-iconpos="notext"></a>

        </div>

        <div data-role="content" id="Menu\Content" style="padding: 2%">

            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <a href="#" data-role="button" style="background: #FFCC33;"><img src="image.png" style="width: 100%;" /></a>
                </div>

                <div class="ui-block-b">
                    <a href="#" data-role="button" style="background: #FFCC33; padding: 0px;"><img src="image.png" style="width: 100%;" /></a>
                </div>
            </div>

        </div>

    </div>
</body>

但结果是：http: //img801.imageshack.us/img801/9474/6aoq.png

如何使图像适合屏幕尺寸？（类似这样的东西； http: //img19.imageshack.us/img19/1305/f1y4.png）

4

1 回答 1

1

我会尝试使用 css 而不是 jquery。你可以用它来完成你正在寻找的东西。例如，您正在使用两个图像。您可以将每一个设置为屏幕的大约 45% 的宽度，并在 css 中添加一个边框。你甚至可以让它根据屏幕大小动态缩放。最好使用 div 容器来组织它，但这个例子应该足以让你开始。

我会尝试这样的事情：

<html>
<head>
<style>
<style type="text/css">
#images {
height: yourheightinpx;
}
#images img {
position: absolute;
max-width: 100%;
width: auto\9;
}
</style>
</head>
<body>
<div id="images">
<img src="yoursrc"><img scr="yoursrc">
</div>
</body>
</html>
于 2013-06-14T21:16:30.030 回答