私はしばらくこれを理解しようとしてきましたが、私が試みたすべてのことは、私が求めている結果を生み出すことに失敗しました.
というわけで設定は以下の通り
HTML
<div class="container">
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
<div class="icon-holder">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png" class="icon"/>
</div>
</div>
CSS
.icon-holder {
float:left;
height:100%;
width:auto;
}
.container {
height:100px;
}
.icon {
height:auto;
width: auto;
max-height: 100%;
display:block;
}
.container-before {
height:100px;
}
.container-after {
height:20px;
}
問題は、JavaScriptを使用してコンテナのサイズを変更する場合、画像のサイズを変更する必要があり、間にスペースがないことにあります。機能する CSS ソリューションが必要です。JS でハックできることはわかっていますが、それは私が達成しようとしているものではありません。
http://jsfiddle.net/twmxh/3/で、期待される出力を伴う問題全体の例を実行しています。
アップデート
実装についてもう少しだけ。div は、container
実際にはサイズ変更ハンドルを持つツールバーです。したがって、コンテナーは、新しい高さを適用できる唯一の要素です。