0

次のようなものがあります。

<table>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    ...
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
    <tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
 </table>

目的は、可能であれば、画像の行のサイズを「ちょっと」調整することです。
たとえば、画像のサイズが 200x200 (px) であるとします。画像のサイズよりも細い行の場合は、画像を 100px まで縮小したい (画像がなかった)。
例えば：

  • 画像がない場合、行の高さが 100px 未満の場合、画像がある場合は高さ 100px になります

  • 画像がない場合、行の高さは 140 ピクセルで、画像がある場合は高さ 140 ピクセルのままです。

  • 画像がない場合、行の高さは 200px で、画像がある場合は高さ 200px のままです。

  • 画像がない場合、行の高さが 260px で、画像がある場合、高さは 260px のままですが、画像は 100% (200px) よりも大きくなりません。

td タグと img タグの両方に min-height + height + max-height を使用してみましたが、ブラウザーの観点からは何も変わりませんでした。

ノート：

  • XHTML 1.1 の doctype を使用しています

  • JavaScript を必要とする回答は必要ありません。私はすでにJSの使い方を知っています（jQueryがなくても）。CSSのみの回答が欲しいです。

4

1 に答える 1

1

このコードを試すことができます：

<table width="100%" border="1">
<tr>
    <td height="100">
            <img src="http://dystroy.org/re7210/img/tartare-saumon-creme-salade-harengs-pommes-de-terre-800.jpg" style="width:auto; height:100%;"/>
    </td>
</tr>
</table>​​​​​​​​​​​​​​​​

デモを見る

于 2012-09-23T11:34:04.010 に答える