3

次のようなタイトルに画像を配置したい HTML テーブルがあります。

   <table style="height: 500px">
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
        <tr>
            <td style="height: 20%"><img src="http://example.com/MgCHv2" style="width: auto; height: 100%" /></td>
            <td style="height: 20%">Some Random Title</td>
        </tr>
    </table>​

画像の高さを 100% に指定しました。ただし、これは元の画像サイズの100％ですが、親要素の100％（テーブルの高さ20％）にしたいのです。画像 (およびセル) の幅は、比例してサイズ変更する必要があります。

これを達成する方法を知っている人はいますか？これは JSFiddle リンクです: http://jsfiddle.net/rbzej/

4

1 に答える 1

3

申し訳ありませんが、これは不可能です。表またはセルの高さを設定しようとしても、最小の高さにのみ影響します。これは、表のセルの高さが少なくともコンテンツに必要な最小の高さであるためです。画像は 100% の高さを指定しているため、これは意味がありません。セルの高さはまだわからないため、代わりに画像の自然な高さが使用されます。

于 2012-06-07T20:52:03.830 に答える