I am trying to figure out a way to make the image fill up 100% of the width, aligning it vertically with the text below. The code I'm working on is for email newsletters using foundation.
Check out my Example Site
Unfortunately, I can't seem to find the solution in the documentation and need to explore other options. How can I achieve this layout where the picture fills all the white space?
Here's the relevant HTML code:
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: blue;">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: red;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: yellow;">
<table>
<tr>
<th>This is where all my text goes. This is where all my text goes. This is where all my text goes.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: pink;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: green;">
<table>
<tr>
<th>More text goes here.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>