2

次のコードがあります。

<table>
    <tr>
        <td class="first">
            <img src="ReallyLargeImage.png" />
        </td>
        <td class="second">
            One line of text<br />
            Another line of text<br />
        </td>
    </tr>
    <tr>
        <td class="first">
            <img src="AnotherReallyLargeImage.png" />
        </td>
        <td class="second">
            This<br />
            has<br />
            four<br />
            lines<br />
        </td>
    </tr>
    ...
</table>

の高td.secondさで各行の高さを決定し、その高さに合わせて画像をtd.first(サイズ比を維持して) 縮小します。

物事をきちんと保つためにCSS /属性だけでそれを行うことができればいいと思います.javascriptも機能します.

4

3 に答える 3

2

CSS

.first img { display: none; }

JS

$("table tr").each(function(){
    $(this).find(".first img").css("max-height", 
        $(this).find(".second").height()).show();
});​

まず、css で画像を非表示にしてheight()、画像サイズによって計算が歪められないようにすることができます。非表示でない場合、何らかの理由で高さの計算がうまくいかないようです。たぶんjQueryのバグ？次に、設定するmax-heightと、画像を表示できます。

例: http://jsfiddle.net/hunter/c3jP6/

于 2012-05-02T14:38:41.133 に答える
0

画像のサイズを動的に変更しますか? そのため、td.second の高さを取得する必要があります。CSS ではそれを行うことはできません。JavaScript が必要になることは間違いありません。

このように要素の高さを取得できます

var divh=document.getElementById('id').offsetHeight;

これはdivでは問題なく機能しますが、表のセルではわかりません。別の形式でいくつかの議論を見つけたので、それらから助けが得られるかどうかを確認してください

Javascript でテーブル セルの
高さを取得する div のピクセルの高さを取得するには?

要素の高さを取得したら、javascript で画像の高さを設定できます。

于 2012-05-02T15:40:11.430 に答える
0

これを使用できます：

<img style="width:100%;height:100%;"/>

画像に合わせて自動的にスケーリングするだけです

于 2012-05-02T14:39:58.590 に答える