0

私はしばらくこれを理解しようとしてきましたが、私が試みたすべてのことは、私が求めている結果を生み出すことに失敗しました.

というわけで設定は以下の通り

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実際にはサイズ変更ハンドルを持つツールバーです。したがって、コンテナーは、新しい高さを適用できる唯一の要素です。

4

4 に答える 4

0

動的に変更された幅に追加してみてください

clear:right;

これにより、コンテナが更新されます

リンクはこちら

http://www.w3schools.com/cssref/pr_class_clear.aspここにリンクの説明を入力

于 2013-08-20T07:56:48.807 に答える
0

画像サイズに合わせて CSS を切り替えてみてください

width: 100%;
height: auto;

ほとんどのブラウザーで高さとパーセンテージが適切に動作するとは思わない

これは一般的に、「レスポンシブ」画像のサイズを定義する方法です...一方、幅は常にコンテナーのサイズに適合し、高さは自動的に一致します。

アニメーションが高さではなく幅でスケーリングされるようにコードを編集します。それが機能するかどうかを確認してください。

于 2013-08-19T23:08:41.997 に答える