Préférez le rétrécissement plutôt que la croissance dans un conteneur flexible avec flex-flow: enveloppement en ligne

9

Affichage d'une galerie d'images de différentes tailles et proportions avec les spécifications suivantes:

  1. Pas de blancs (marges) entre les images.
  2. Respecter autant que possible le ratio d'origine.
  3. Images entourées d'un lien.
  4. Solution non JS.
  5. Les images pourraient être recadrées un peu.
  6. Solution portable.
  7. L'ensemble des images affichées est aléatoire.
  8. Les images doivent être affichées de gauche à droite (empêche l'utilisation de colonnes).

J'y suis parvenu avec la solution flexbox suivante:

Afficher l'extrait de code

La solution fonctionne, mais en fonction de la taille de la fenêtre, certaines images sont trop agrandies, je préférerais plus d'éléments par ligne, même si les éléments doivent être plus rétrécis.

Cela signifie qu'au lieu de: Solution actuelle

Je préférerais une densité d'éléments plus élevée pour que les images ne soient jamais agrandies: Exemple de mise en page attendue

J'ai cherché des solutions pour augmenter globalement le nombre d'éléments par ligne afin que les images ne soient pas agrandies (ou du moins pas trop: par exemple: 10% max).

Les deux solutions hackeuses que j'ai trouvées jusqu'à présent sont:

Solution 1

Utilisation de la propriété zoom :

Afficher l'extrait de code

Mais cette propriété fonctionne très bien dans Chrome, pas dans Firefox.

Solution 2

Émulation de la propriété zoom avec largeur / hauteur et transformation: échelle :

Afficher l'extrait de code

Cette solution a fonctionné jusqu'à présent, mais nécessite quelques hacks, et est loin d'être élégante et aura désormais des impacts avec les autres éléments de la page.

Existe-t-il une autre solution, plus orientée flexgrid, qui permet ce type de contrôle? J'ai essayé d'utiliser flex-grow: 0 : cela désactive en effet la croissance des éléments, mais il y a des blancs autour des images partout.

css flexbox image-gallery Patrick Allaert
la source

Réponses:

1

Je modifie votre tentative de démarrage.

L' idée principale est de changer img width: 100%;pour width: auto;et spécifier des liens height. Cela nous donnera des images avec des lacunes.

Pour supprimer les lacunes que nous pourrions ajouter aux liens display: flex;et flex-direction: column;. Presque fini.

La dernière étape consiste à ajouter des liens max-width: 100%;, il protègera du débit excessif si l'image widthsera plus large que la colonne sur un petit écran. Un tel problème que nous pourrions voir dans la première solution de Temani Afif avec la 4ème image, si nous mettons plus heightde liens. Édité

Regardez dans l'extrait.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  display: flex;
  flex-direction: column;
  height: 166px;
  max-width: 100%;
}

section img {
  height: 100%;
  width: auto;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Controlling flex growability</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>

  </style>
</head>

<body>
  <section>
    <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
    <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  </section>
</body>

</html>
Développer l'extrait

Aleksandr Belugin
la source
C'est la meilleure réponse jusqu'à présent. Il ne donne pas le même résultat que l'utilisation zoomcar il fixe toutes les lignes pour avoir exactement la même hauteur, ce faisant: il empêche l'algorithme de flex naturel de "s'adapter" à quelque chose "aussi optimal que possible". Pour autant que je sache, il n'est pas encore possible de réaliser ce que je veux d'une manière compatible et non hacky.
Patrick Allaert
0

Voici une idée où vous pouvez considérer la hauteur pour contrôler la taille des rangées et l'astuce principale est de vous fier à min-width:100%vos images pour remplir l'espace.

Fondamentalement, le ava définir la hauteur, l'image suivra cette hauteur et calculera une autolargeur pour garder le rapport. La largeur de l'image définira la largeur du lien, puis le lien se développera pour remplir l'espace (créant de l'espace à l'intérieur). Enfin, min-width:100%vous allez faire remplir l'image par l'espace créé à l'intérieur du lien.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 100px;
}

section img {
  height: 100%;
  width: auto; /* we need auto to keep the ratio based on the height */
  min-width: 100%; /* we expand the image to fill the gaps */
  max-width:100%;
  object-fit: cover;
}
<section>
  <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
Développer l'extrait

Si vous considérez l' vwunité pour la hauteur, vous aurez une grille statique qui évoluera tout en conservant la même structure globale:

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 8vw;
}

section img {
  height: 100%;
  width: auto;
  min-width: 100%;  
  max-width:100%;
  object-fit: cover;
}
<section>
  <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
  <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
Développer l'extrait

Temani Afif
la source
-2

vous pouvez le résoudre en ajoutant line-height: 0à aet en définissant la heightvaleur avec pxvalue.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
section a {
  flex: auto;
  line-height: 0;
}
section img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Controlling flex growability</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>

    </style>
</head>
<body>
    <section>
        <a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
        <a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
    </section>
</body>
</html>
Développer l'extrait

Matan Sanbira
la source
Cela change la hauteur de chaque ligne, cela ne permet pas plus d'éléments par ligne comme avec l'effet de zoom ou le hack équivalent.
Patrick Allaert