Sensible galerie d'image à l'aide de CSS flexbox ou une grille de mise en page

Je suis en train de travailler sur une Image-Galerie-Widget où l'utilisateur peut définir une miniature de la largeur, de la hauteur de la vignette et de la marge (entre les vignettes) et le widget va présenter l'ensemble de l'image-thumnails dans une belle grille où chaque image a la même largeur et la hauteur.

, Je me demande si css-flexbox ou css-grille rend cela possible sans la nécessité de définir les lignes et les colonnes dans le code et sans la nécessité pour les points d'arrêt/media-queries.

Forme de vignettes les Images sont enveloppés dans un point d'ancrage, de sorte qu'un élément de la galerie (ou grille-élément) ressemblera à quelque chose comme ceci:

<a href="#" class="gallery-item">
    <img src="myimage" width="300" height="200" />
</a>

Les éléments de la galerie doit remplir complètement le div conteneur, ce qui signifie qu'il ne devrait pas y avoir un écart entre la dernière vignette dans une rangée et le div conteneur du bord droit (sauf si nous n'avons pas assez d'éléments pour remplir la ligne c'est à dire lorsque les 3 éléments de pi en une ligne, mais nous n'avons que 8 éléments, puis la 3ème ligne de seulement 2 articles et d'un écart à droite qui est aussi large qu'un élément).

Éléments de la galerie ne peut jamais être plus large que la forme de vignettes de largeur à l'utilisateur de définir, parce que nous ne voulons pas dégrader la qualité de l'image. Supposons 300px de largeur pour cet exemple. La marge entre les éléments de la galerie est fixe et réglé par l'utilisateur. Si il n'y a pas assez d'éléments à gauche pour remplir une ligne, il suffit de gauche aligner, c'est à dire comme ceci:

Sensible galerie d'image à l'aide de CSS flexbox ou une grille de mise en page

Je ne veux pas de définir des points d'arrêt dans le CSS ni ajouter de code html pour la ligne/colonne constructions. Je veux le navigateur il suffit de placer autant d'éléments de la galerie côté par côté, comme s'insérer dans le conteneur. Si il y a un écart sur la droite (c'est à dire 3 vignettes * 300px de largeur = 900px, mais conteneur est 1000px de large), le navigateur devrait échelle en bas de la grille, de sorte qu'un élément de la galerie va s'adapter et ainsi éliminer l'écart. J'ai besoin d'être en mesure de définir une marge autour de chaque élément de la galerie.

Vous pouvez voir l'souhaité comportements réactifs (lors de la modification de la largeur du navigateur) dans ce gif:

Sensible galerie d'image à l'aide de CSS flexbox ou une grille de mise en page

Ce que vous voyez dans le gif est fait sans flexbox, mais a besoin d'une tonne de CSS qui j'ai été en espérant éviter avec flexbox. J'ai fait des recherches flexbox assez peu, mais je n'ai pas été en mesure d'obtenir ma tête autour d'elle complètement pour l'instant.

Merci pour les conseils!

Est js autorisé ici?
Non, je suis à la recherche d'un CSS seule solution.
Merci de poster le code que vous avez essayé.
n'avez pas essayé le code mais, depuis que je suis à l'aise dans le CSS mais ne savez pas une chose à propos de flex ou une grille de mise en page pour l'instant et avait le sentiment qu'elles offriraient le plus simple CSS seule solution.

OriginalL'auteur zıəs uɐɟəʇs | 2017-02-21

11

À l'aide de flex capacités devrait être suffisant pour votre tâche. Être conscient de prise en charge partielle dans IE11: http://caniuse.com/#feat=flexbox.

Mettre ces styles sur votre conteneur:
```
.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}
```
Styles pour l'encapsulation:
```
.gallery a {
  flex-grow: 1;
  flex-basis: 125px;
  max-width: 300px;
  margin: 5px;
}
```
Styles pour les images:
```
.gallery img {
  height: 100%;
  width: 100%;
}
```
L'espace entre les images peut être simplement définie à l'aide de margin.
Afin de préserver l'image vous pouvez utiliser par exemple les liens (<a>) comme un des wrappers pour les images (<img>).

En outre, afin de prévenir l'agrandir les images, vous pouvez appliquer flex-grow, flex-basis et max-width attributs sur les ancres.
Il y avait aussi un problème avec l'étirement des images dans la dernière ligne - hack pour ce qui est de mettre n - 1 (où n est le nombre d'images) des éléments vides à l'intérieur du contenant.

Réglage width et height à 100% sur les images applique à croître automatiquement à la largeur définie par max-width attribut, tout en conservant les proportions.

Veuillez vérifier le travail exemple:
VIOLON

Que dire de la dernière ligne?
Je pense que c'est mieux s'étendait à l'ensemble de la largeur de la ligne, n'est-ce pas? 🙂
Eh bien... je ne suis pas l'OP, donc je n'ai aucune idée.
Merci beaucoup Luc! C'est presque parfait. Le seul problème que j'ai avec cette solution est que c'est seulement à agrandir les images dans l'ordre pour bien remplir les lignes. Lorsque les images sont agrandies, la qualité en souffre terriblement. J'étais à la recherche d'une solution, qui permettrait d'atteindre des résultats similaires, que ce soit l'affichage d'images à 100% de leur taille ou de rétrécir (jamais agrandir) afin de remplir les lignes.
Vérifié dans le navigateur maintenant. Exactement ce que je voulais. Merci encore! Ici un violon de la façon dont je voudrais mettre en œuvre une véritable galerie, où chaque élément de lien vers un plus grand aperçu de chaque vignette. J'ai également ajouté CSS si je peux juste ajouter une classe dans le but de décider si je veux avoir uniforme-largeur-éléments ou si des éléments peuvent s'étirer si une ligne n'est pas entièrement rempli...

OriginalL'auteur luke

Si vous n'avez pas l'esprit en utilisant les médias, les points d'arrêt, l'utilisation de nouvelles Grille CSS de Mise en page.
N'oubliez pas de préfixe pour IE10+ support.

Grille:

.gallery {
    display: grid;
    grid-gap: 5px;
}

Images responsives:

.gallery img {
    width: 100%;
}

Médias des points d'arrêt (valeurs de Bootstrap 4)

@media (max-width: 575.98px) {
    .gallery {
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (max-width: 768.98px) and (min-width: 576px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991.98px) and (min-width: 768px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr); 
    }
}
@media (max-width: 1199.98px) and (min-width: 992px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr); 
    }
}
@media (min-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr); 
    }
}

jsFiddle

OriginalL'auteur midzer

Vous devez vous connecter pour publier un commentaire.