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

jquery の代わりに css を使用してみます。あなたはそれであなたが探しているものを達成することができます. たとえば、2 つの画像を使用しているとします。それぞれを画面の約 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 に答える