JQM horizontal height auto-adjust (listview and buttons) - jquery-mobile

Question

I'm using:
jquery-1.8.2 and jquery-mobile-1.2.0 (generated with all options checked)
Targeted devices are iPhone 4/4s/5 and iPad.
The current data-role="listview":
Test link
The current code:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="pics/paul_jones.jpg" />
<h3>First Element</h3>
<p>First</p>
</a></a>Test
</li>
<li><a href="index.html">
<img src="pics/ray_moore.jpg" />
<h3>Second Element</h3>
<p>Second</p>
</a>Test
</li>
<li><a href="index.html">
<img src="pics/lisa_wong.jpg" />
<h3>Third Element</h3>
<p>Third</p>
</a>Test
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</pre>
What is the best way to make each item auto-adjust its height to stretch to full screen vertically (I see that the framework handles very well horizontal stretching), so that each row is 33% of the screen in this case, and have the images resize accordingly? Obviously this would have to work when there are four or more items.
In my site main page I would instead like to have three or four "image buttons" that I styled this way.
<b>#button_id .ui-btn-inner</b>
background: url("../img/button_image.png") no-repeat rgba(0, 0, 0, 0.4);
background-size: 100% 100%;
fill the screen vertically autoresizing themselves.