afficher les images en fonction de la largeur du navigateur

Question

J'ai un tas d'images que je voudrais afficher en utilisant jquery. J'ai des divs et j'ai utilisé jquery pour peupler les divs en fonction de certains critères node_id. Par exemple, si node_id est teamA, j'affiche des images qui ont un texte teamA dans le nom des images.

Cela fonctionne trouver, le problème est que lorsque mettre les images sur le corps du code HTML, les images sont affichées verticalement jusqu'à ce qu'il n'y ait pas d'espace sur la page principale.

Ce que je voudrais faire en fonction de la taille de la fenêtre du navigateur, afficher les images en fonction de la taille de la fenêtre du navigateur. Par exemple, si la taille de l'image est 500x500 et la largeur de la fenêtre du navigateur est 700, je devrais être en mesure d'afficher une image par ligne. Si la largeur du navigateur est de 1200, il devrait y avoir 2 images par ligne dans la fenêtre de mon navigateur.

Pour vous donner une idée, j'ai mis le code html et jquery vous montrer ce que je fais:

<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> 

Ce code jquery pour afficher l'image en fonction node_id jstree:

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) 

      }); 

Cela fonctionne, mais je dois afficher les images en fonction de la taille de la fenêtre du navigateur, verticalement ou horizontalement, en fonction de l'espace dont dispose le navigateur. Quelqu'un peut-il me donner des idées sur comment je ferais cela?

Answer 1

Si vous pouvez spécifier la largeur des images, vous pouvez les faire flotter dans un élément de niveau bloc. Par exemple:

<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> 

et utiliser le CSS suivant:

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

Pour faire ce travail, définissez overflow: auto dans le conteneur parent, surtout si vous souhaitez utiliser une couleur de fond ou de l'image.

Vous pouvez ajuster la marge ou le remplissage de l'élément flottant pour créer et mettre en forme les gouttières entre les images.

Enfin, j'utilise display: block sur les images pour faire face à tout espace blanc qui pourrait résulter d'un élément en ligne.

Pour référence, voir: http://jsfiddle.net/audetwebdesign/8FEeM/

Answer 2

<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;} 

Answer 3

Dans mon script peut le faire: (. Équipe).

$ css ({ "largeur": $ (fenêtre) .width(), " hauteur ":" auto "});