リキッドレイアウト × 幅の異なる画像 × 横並び の場合の高さの調整方法
リキッドレイアウトでHTMLを組んだ際に、画像サイズも自動的に縮小されて欲しいと思い、widthにパーセンテージを指定しました。
幅の異なる画像を隙間なく並べた場合に、縮尺の関係から縦幅がずれてしまい見栄えがよくありません。
この現象を解消したいのですが良い方法はありますでしょうか。
全体的にリキッドレイアウトにしたいので、heightに具体的なサイズを指定することはできません。
以下が当該箇所のHTMLです。よろしくお願いいたします。
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="95%" bgcolor="#FFF" style="border-collapse:collapse;">
<tr>
<td>
<!-- wrapper : start -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center" style="max-width:700px; margin:auto;" class="email-container">
<tr>
<td>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="49%" style="vertical-align:top; font-size:0; line-height:0;">
<img width="100%" src="img/left.jpg" style="display: block;" alt="LEFT">
</td>
<td width="51%" style="vertical-align:top; font-size:0; line-height:0;">
<img width="100%" src="img/right.jpg" style="display: block;" alt="RIGHT">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- wrapper : end -->
</td>
</tr>
</table>