afficher des images en fonction de la largeur du navigateur

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

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

Ce que je voudrais faire en fonction de la taille de la fenêtre du navigateur, affiche les images en fonction de la taille de la fenêtre du navigateur. Par exemple, si la taille de l’image est 500×500 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 1 200, il devrait y avoir 2 images par ligne dans la fenêtre de mon navigateur.

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

C’est le code jquery pour afficher l’image basée sur jstree node_id:

 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 doit marcher, 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 disponible sur le navigateur. Quelqu’un peut-il me donner des idées sur la manière de procéder?

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

et utilisez les CSS suivants:

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

Pour que cela fonctionne, définissez overflow: auto dans le conteneur parent, en particulier si vous souhaitez utiliser une couleur ou une image d’arrière-plan.

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

Enfin, j’utilise display: block sur les images pour traiter tout espace blanc pouvant résulter d’un élément en ligne.

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

CSS

 .team img{float: left;}

Dans mon script peut faire ceci:

$ (‘. team’). css ({“width”: $ (window) .width (), “height”: “auto”});