0

残りのコンテンツが固定高さのコンテナに収まるようにする必要がある場合にのみ、画像のサイズを変更できる CSS および/または JavaScript/jQuery はありますか? 下のスクリーンショットの今週の新しいセクションと毎週のスペシャルセクションの画像を確認すると、私が何を意味するかがわかります. ただし、画像が十分に小さく、その下のテキストの量がそれほど大きくないため、すべてが収まる場合もあります。

ここで例を参照してください

4

3 に答える 3

2

いいえ、あなたが説明しているようにCSSだけではありません。しかし、はい、jQuery を使用すると、これを実現できます。

私は個人的に jQuery を使ってコード化されたソリューションを提供しようとするほど効率的ではありませんが、概念的には、結合された子要素の計算された高さをチェックし、それを親コンテナーの高さと照合するなどのことを行うことができます。次に、子要素が固定要素の高さよりも大きい場合は、差を計算し、その新しい値をインライン高さ属性またはインライン スタイル属性として画像に追加します。

于 2012-05-31T02:34:32.357 に答える
2

jQuery の場合:

$(document).ready(function() { $('div.item img').each(function() {
    var image = $(this);
    var div = $('div.item p');
    if ((image.height() + div.height()) >> $('div.item').height()) {
        while ((image.height() + div.height()) >> $('div.item').height()) {
            image.height(image.height() - 1);
        }
    }
});});
于 2012-05-31T02:31:17.303 に答える
0

max-height CSSプロパティを設定することの何が問題になっていますか？

<img src="big.jpg" style="max-height:300px">

次に、CSS式を追加してIE6を回避します

<img src="big.jpg" style="max-height:300px; _height:expression(Math.min(this.offsetHeight, 300))">
于 2012-05-31T03:51:22.493 に答える