0

jqueryを使用して表示したい画像がたくさんあります。私はdivを持っており、jqueryを使用していくつかのnode_id基準に基づいてdivにデータを入力しました。たとえば、node_idがteamAの場合、画像の名前にteamAテキストが含まれる画像を表示します。

問題は、画像をhtmlの本文に配置すると、メインページにスペースがなくなるまで画像が垂直に表示されることです。

ブラウザウィンドウのサイズに応じてこれを実行したいのですが、ブラウザウィンドウのサイズに応じて画像を表示します。たとえば、画像サイズが500x500で、ブラウザウィンドウの幅が700の場合、1行に1つの画像を表示できるはずです。ブラウザの幅が1200の場合、ブラウザウィンドウには1行に2つの画像が表示されます。

あなたにアイデアを与えるために、私はあなたに私がしていることを示すためにhtmlとjqueryコードを置きました：

<div class="tab-content" id="tabs1">
    <div id="team_A" class="team"></div>
    <div id="team_B" class="team"></div>
    <div id="team_C" class="team"></div>
    <div id="team_D" class="team"></div>
</div>

これは、jstreenode_idに基づいて画像を表示するためのjqueryコードです。

var team_A_Img = "http://test.net" + node_id + "-team_A.png";
            $(function () {

                var myImage = new Image();
                $(myImage).load(function () {

                    $("#team_A").html(myImage);

                }).error(function () {

                    $('#team_A').hide();
                }).attr('src', Img_A_Img)

            });

これは機能しますが、ブラウザのウィンドウサイズに基づいて、ブラウザのスペースに基づいて、垂直方向または水平方向に画像を表示する必要があります。誰かが私にこれをどのように行うかについてのアイデアを教えてもらえますか？

4

3 に答える 3

3

画像の幅を指定できる場合は、ブロックレベルの要素で画像をフロートさせることができます。例えば：

<div class="tab-content" id="tabs1">
    <div id="team_A" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_B" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_C" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_D" class="team"><img src="http://placehold.it/350x150"></div>
</div>

次のCSSを使用します。

.tab-content {
    padding: 0px;
    background-color: yellow;
    overflow: auto;
}
.team {
    float: left;
    margin: 0 5px 5px 0;
}
.team img {
    display: block;
}

これを機能させるoverflow: autoには、特に背景色や画像を使用する場合は、親コンテナに設定します。

フロート要素のマージンまたはパディングを調整して、画像間にガターを作成およびスタイル設定できます。

最後にdisplay: block、インライン要素から生じる可能性のある空白を処理するために画像を使用します。

参考までに、http： //jsfiddle.net/audetwebdesign/8FEeM/を参照してください。

于 2013-03-13T16:54:59.803 に答える
1 
<div class="tab-content" id="tabs1">
<div id="team_A" class="team">
    <img src="http://placehold.it/500x500" />
    <img src="http://placehold.it/500x500" />
    <img src="http://placehold.it/500x500" />
</div>

CSS

.team img{float: left;}
于 2013-03-13T16:54:36.153 に答える
0

私のスクリプトではこれを行うことができます：

$（'。team'）。css（{"width"：$（window）.width（）、 "height"： "auto"}）;

于 2013-03-13T17:04:33.693 に答える