ストック 2 列の JQuery モバイル レイアウト 'ui-grid-a' を使用しています。
なぜこれが機能するのか
<div data-role="page">
<div data-role="content">
<div class="ui-grid-a"> <!-- ui-grid-a is a preset 2 column layout in JQuery Mobile -->
<div class="ui-block-a"><!-- ui-block-a is a preset block in JQuery Mobile, it denotes the left column -->
<img src="images/a.jpg" style="width:100%" />
</div>
<div class="ui-block-b"><!-- Right column -->
<p>Right column...</p>
</div>
</div>
</div>
しかし、これはそうではありません...
<HEAD>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style type="text/css">
.full-image
{
width:100%;
}
</style>
</HEAD>
<BODY>
<div data-role="page">
<div data-role="content">
<div class="ui-grid-a"> <!-- ui-grid-a is a preset 2 column layout in JQuery Mobile -->
<div class="ui-block-a"><!-- ui-block-a is a preset block in JQuery Mobile, it denotes the left column -->
<img src="images/a.jpg" class="full-image" />
</div>
<div class="ui-block-b"><!-- Right column -->
<p>Right column...</p>
</div>
</div>
</div>
また、img に直接 css を使用しても (img { width: 100% }) は機能しません。