CSS : galerie d'image façon Google Images
Fetide68
Messages postés
745
Date d'inscription
Statut
Membre
Dernière intervention
-
bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention -
bg62 Messages postés 23735 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'essaie de créer une galerie d'images façon résultats Google Images:
ex:https://www.google.fr/search?q=chien&es_sm=119&source=lnms&tbm=isch&sa=X&ei=9LvGU6vSEI2Y1AWslICABw&ved=0CAgQ_AUoAQ&biw=1363&bih=878
Le but étant de faire des lignes de 5 images en adaptant, comme Google la largeur et la hauteur pour que les lignes aient toutes la même largeur et que chaque image d'une ligne ait la même hauteur.
Ici, le problème est un peu plus simple que sur Google, vu que j'aurais 5 images par ligne et que la largeur de ma ligne est fixe à 980px de large.
J'ai noté que sur Google la hauteur de chaque ligne était légèrement différente les unes par rapport aux autres, donc si ma hauteur change un peu c'est pas grave non plus.
Pour l'instant, j'ai réussi à caser 5 images par ligne de 980px mais le problème reste la hauteur...
Voici ma formule (je ne dis pas que c'est la plus simple et la meilleure et je reste ouvert à d'autre propositions) :
Notez que j'utilise une largeur de 940px, soit 980 - 4 x 10px d'espacement...
Avec des chiffres (1re image de la 1re ligne)
C'est un casse tête.
Merci.
J'essaie de créer une galerie d'images façon résultats Google Images:
ex:https://www.google.fr/search?q=chien&es_sm=119&source=lnms&tbm=isch&sa=X&ei=9LvGU6vSEI2Y1AWslICABw&ved=0CAgQ_AUoAQ&biw=1363&bih=878
Le but étant de faire des lignes de 5 images en adaptant, comme Google la largeur et la hauteur pour que les lignes aient toutes la même largeur et que chaque image d'une ligne ait la même hauteur.
Ici, le problème est un peu plus simple que sur Google, vu que j'aurais 5 images par ligne et que la largeur de ma ligne est fixe à 980px de large.
J'ai noté que sur Google la hauteur de chaque ligne était légèrement différente les unes par rapport aux autres, donc si ma hauteur change un peu c'est pas grave non plus.
Pour l'instant, j'ai réussi à caser 5 images par ligne de 980px mais le problème reste la hauteur...
Voici ma formule (je ne dis pas que c'est la plus simple et la meilleure et je reste ouvert à d'autre propositions) :
Notez que j'utilise une largeur de 940px, soit 980 - 4 x 10px d'espacement...
W = Total de la largeur des images
ratio = largeur de l'image / W
largeur de l'image = 940 x ratio
Avec des chiffres (1re image de la 1re ligne)
largeur totale des images de la ligne = 3200
ratio = 640 / 3200
image = 940 * 0,2 = 188
C'est un casse tête.
Merci.
A voir également:
- CSS : galerie d'image façon Google Images
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
2 réponses
Bonjour
la solution est en css avec les images dans un div ou la balise figure de html5 en display inline-block un petit calcul
exemple
html
css
tu peux rajouter un script si une image est trop haute qui reduit l'image
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
la solution est en css avec les images dans un div ou la balise figure de html5 en display inline-block un petit calcul
exemple
html
<div class="lesimages">
<figure><img src="image1.jpg"></figure>
<figure><img src="image2.jpg"></figure>
<figure><img src="image3.jpg"></figure>
<figure><img src="image4.jpg"></figure>
<figure><img src="image5.jpg"></figure>
<figure><img src="image6.jpg"></figure>
<figure><img src="image7.jpg"></figure>
<figure><img src="image8.jpg"></figure>
<figure><img src="image9.jpg"></figure>
<figure><img src="image10.jpg"></figure>
</div>
css
.lesimages {
width: 980px;
margin: 0 auto;
font-size: 0;
border:1px solid red;
}
figure {
display: inline-block;
width:154px;
height:auto;
margin:10px;
text-align:center;
padding:10px;
}
figure img {
vertical-align:middle;
width:100%;
border:1px solid black;
}
tu peux rajouter un script si une image est trop haute qui reduit l'image
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Or sur Google, je trouve l'effet vraiment sympa...
Mais je garde ta solution sous le coude.
Au cas, pour t'aider en retour, si jamais. J'utilise beaucoup le framework CSS Knacss:
https://www.knacss.com/
Etant alsacien, j'en suis d'autant plus fier (même s'il n'est pas de moi).
Dans le script, tu as les grid et autogrid qui permettent des choses sympas...
Merci encore.
Je vais poursuivre les recherches....
Fetide