Question

我是这个社区的新手：我正在尝试使用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）

Answer 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>

jQuery Mobile图像自动调整大小

1 个答案: