Galerie img
Résolu
BaptisteDebes
Messages postés
90
Date d'inscription
Statut
Membre
Dernière intervention
-
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention -
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je recherche à faire une une galerie img où les images se placent celon certain critère du genre 4 img par ligne écartement en les img de 30 px
Tous ce qui est php je m'en sort mais le je bloque, pouvait m'indiquer svp la démarche à suivre.
Merci d'avance
Je recherche à faire une une galerie img où les images se placent celon certain critère du genre 4 img par ligne écartement en les img de 30 px
Tous ce qui est php je m'en sort mais le je bloque, pouvait m'indiquer svp la démarche à suivre.
Merci d'avance
A voir également:
- Galerie img
- Img burn - Télécharger - Gravure
- Galerie photo en ligne gratuite - Guide
- Fichier img - Télécharger - Photo & Graphisme
- Comment masquer une photo dans la galerie - Guide
- Galerie photos windows - Télécharger - Albums photo
1 réponse
Bonjour,
Une idée en HTML5.
Chaque image est encadrée par figure comme ceci:
ensuite, on agit sur le CSS de figure:
figure {
display; inline-block;
float: left;
width: 240px;
margin: 0px;
margin-right: 30px;
}
figure img {
width: 100%
}
Avec cette solution, chaque image occupe l'espace défini dans figure, à savoir ici 240px. Selon la largeur de l'écran, il s'affichera automatiquement 3 ou 4 ou 5 ou 6... images par ligne. Si l'utilisateur redimensionne son espace visible, le nombre d'images affichées par ligne s'ajustera automatiquement.
A+
un +1 sur mes commentaires - si vous avez apprécié - c'est gentil, merci.
Une idée en HTML5.
Chaque image est encadrée par figure comme ceci:
<figure> <img src="lienImage01.jpg"/> </figure> <figure> <img src="lienImage02.jpg"/> </figure> ..... <figure> <img src="lienImagenn.jpg"/> </figure>
ensuite, on agit sur le CSS de figure:
figure {
display; inline-block;
float: left;
width: 240px;
margin: 0px;
margin-right: 30px;
}
figure img {
width: 100%
}
Avec cette solution, chaque image occupe l'espace défini dans figure, à savoir ici 240px. Selon la largeur de l'écran, il s'affichera automatiquement 3 ou 4 ou 5 ou 6... images par ligne. Si l'utilisateur redimensionne son espace visible, le nombre d'images affichées par ligne s'ajustera automatiquement.
A+
un +1 sur mes commentaires - si vous avez apprécié - c'est gentil, merci.
Un petit article sur ce sujet:
http://html5.immo-scope.com/index.php?page=html5/elementFigure
où l'élément figure permet même de délimiter sémantiquement des caractères ASCII utilisés pour faire un dessin.
A+