Skip to content

Aurélien STRIDE

  • Projets personnels
    • Projets Web personnels
    • Language-of.love
    • Squary Movey / Taiketsu-Doku
    • Sudokube / Wordokube / Linkube
    • Recyclage Augmenté
    • Réflexions en 3D
    • Fièvre de cheval du samedi soir
    • Concours divers
  • Dessins
    • 1998 – Arts Appliqués
    • Actualités
    • Compteurs d’eau
    • Divorce
    • Enquêtes
    • GPS
    • Immobilier
    • Informatique
    • Psycho
    • SNCF
    • Vie de couple
    • Dessins divers
  • Musiques
    • 2016 – Oxydoréduction
    • 2012-2021 – Mashups
    • 2008-2016 – Indaba Remixes
    • 2013 – Live @ Mistral Palace
    • 2012 – Symphonie Electronique
    • 2010 – Metric : Fantasies
    • 2008 – Marcy Playground : Leaving Wonderland
    • 2008-2010 – Ganadji-Nesis
    • 2008-2009 – Mandalas
    • 2007-2009 – Electrons Libres
    • 2006-2007 – Manifest for a generation
    • 2003 – De Inferni Profundis
    • 1997 – MODified
    • Par genre
      • Ambient
      • Jazz
      • Hip-Hop
      • Nightclub
    • Morceaux non classés
    • Vidéos musicales
    • Playlist Soirée Château de Fitou
  • Travaux graphiques
    • Affiches / Flyers
    • Cartes de visite
    • Jaquettes CD-DVD
    • Logos & Bannières
    • Photomontages
    • Sketchups
    • Weavesilk
  • Tutoriels
    • Les outils du dépanneur informatique
    • Liste de mes programmes favoris
    • L’installation idéale d’un OS
    • Installer un serveur web sous Unix
  • Liens favoris
  • Road Trip

Aurélien STRIDE

Life & Works

Galerie en CSS3 avec Flex

12 janvier 2018 by webmaster

Flex est une propriété de CSS3 permettant d’ajuster automatiquement l’alignement des éléments (en général de largeur identique) en fonction de la largeur de l’écran, tout en conservant 100% de couverture. J’ai repris cette propriété pour faire un affichage de galerie automatisé en fonction des images chargées.

CSS :

(on peut moduler la hauteur)

.images {display: flex; flex-flow: row wrap;}
.images img {min-height:200px; width:auto;}

PHP :

<?php
$t = scandir('./img/');
$t = array_slice($t, 2);
foreach ($t as $file):
    $size = getimagesize('./img/' . $file);
    echo '<img src="img/' . $file . '" style="flex:' . $size[0]/$size[1] . ';"/> ';
endforeach;
?>

Résultat :

 

https://youtu.be/AT0X9Gro-90

Post navigation

Previous Post:

CES 2018 : les nouveautés technologiques

Next Post:

Des applications géolocalisées écologiques et économiques

Laisser un commentaire Annuler la réponse

Vous devez vous connecter pour publier un commentaire.

[Mashup] Daft Punk meets Michael Jackson - Around the Thriller
[Remix] Skype Ringtone
© 2023 Aurélien STRIDE - Powered by Minimalisticky