Positionnement images

Résolu/Fermé
sovogs Messages postés 2 Date d'inscription mardi 29 mars 2016 Statut Membre Dernière intervention 29 mars 2016 - Modifié par sovogs le 29/03/2016 à 16:37
sovogs Messages postés 2 Date d'inscription mardi 29 mars 2016 Statut Membre Dernière intervention 29 mars 2016 - 29 mars 2016 à 17:37
Bonjour,

Je suis en train de créer un portfolio et je souhaiterais positionner mes images de la manière suivante :


(Avec une largeur fixe, mais une hauteur différente selon les images, et que celles-ci soit toutes 'collées' sans espaces sur les côtés et le tout centré sur la page.)

Est-ce possible ? avec "display: flex;" ?

Mon code HTML ressemble à ça :

<div id=conteneur2">
<div class=hover01">
<div>
<figure><img src=url.png" height=auto width="250"/></figure>
</div>
<div>
<figure><img src=url.png" height=auto width="250"/></figure>
</div>
</div>


J'ai un hover sur les images qui, lorsqu'on passe la souris sur les images zoom.

Et donc mon code CSS pour cette partie :


#conteneur2
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.hover01 figure img
{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover01 figure:hover img
{
-webkit-transform: scale(1.4);
transform: scale(1.4);
}


Je suis débutante et j'ai tenté différents bidouillages sans succès. Du coup si quelqu'un pouvait m'aider ça serait gentil.
Merci d'avance.

EDIT:
j'ai un peu avancé je crois, mais les images ne sont toujours pas collées les unes sous les autres..

Code CSS:

#conteneur2 img
{
position: relative;
float: left;
width: 250px;
height: auto;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}

A voir également:

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
29 mars 2016 à 16:48
Salut,

Tu peux trouver un tuto donnant une solution en css ici : https://css-tricks.com/seamless-responsive-photo-grid/

Sinon, comme évoqué dans le tuto, il est également possible d'utiliser le projet Masonry : https://masonry.desandro.com/

Bonne journée,
1
sovogs Messages postés 2 Date d'inscription mardi 29 mars 2016 Statut Membre Dernière intervention 29 mars 2016
29 mars 2016 à 17:37
Bonjour,

Merci beaucoup, ça marche nickel.

Bonne journée également.
0