高さよりは、その親DIV

Question

に収まるように削除/追加される動的に私はすべての提案の記事に見ていると、彼らは私がやりたいもののopositeに対処するように見えます。動的な 'DIV'の代わりに、上記のコンテナをサイズで固定し、コンテナの内容をコンテンツの量に基づいて高さを調節してdivに合わせる必要があります。私はイメージではなく、テキストで作業する必要があります。

具体的には、私はワードプレスのサイトのための「単一ページ」に関する記事のthumnailsが含まれているdiv要素を持っています。私は、20のサムネイル、あるいは多分10、またはおそらく100を追加することができるようにしたい。しかし、それらがどれだけ追加されても、thumnailsの高さはあらかじめ定義されたdivに収まるように調整されます。

だから、他の言葉で、私は私のサムネイルの高さはthumnailsの数で割っ含むdiv要素の高さの割合である必要が...私は

例の写真の前に含めると考えます効果の後に私が探している： 私はすでにいくつかのホバーアニメーションを行うためにjqueryを使用しているので、既にスクリプトフレームワークが設定されています。 私はちょうどこのようなことをやってみる方法を知りません。

ありがとうございました！ここ

Answer 1

すべての高さの合計がcotainerの所望の高さになるよう、各画像の高さを修正するコードである。

// all image tags inside the container 
var images = $('#container').find('img'); 
// desired height of the container (you can use also data- attribute) 
var height = 400; 
images.each(function() { 
    // let's say 600 is the original width of the image 
    $(this).css('width', '600px'); 
    // modify height of the image 
    $(this).css('height', height/images.length + 'px'); 
}); 

HEREを追加/削除して使用して支持実施例でありますカスタムイベント。

Answer 2

また、CSS3のフレキシボックスを使用したJavaScriptせずにこれを行うことができますが、あなたは、これらが唯一のWebkitブラウザとFirefoxでサポートされています。あなたのCSSは次のようになります。

ここ

#container { 
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 
    height: 500px; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    box-orient: vertical; 
} 

#container div { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
} 

例http://jsfiddle.net/NtVTY/（ジャバスクリプトは単なる説明のためである）です。

しかし、残念ながら、私はそれだけで、符号化運動:)