Bonjour à tous.
Je sollicite votre aide afin d'être vraiment certain que ce que j'essaie n'a pas de solution en CSS seul.
Je suis webdesigner et pour un projet je dois réaliser une mosaique d'images.
Voici les contraintes :
- L'environnement totalement responsive (pas de dimensions connus en pixel).
- Les images à afficher ont des ratios pouvant être très différents (portrait, paysage, panoramique...).
- Les images ne doivent être contenues dans un bloc type afin qu'il y ai une homogénéité d'ensemble.
- Les images devront être justifiées sur le bas du conteneur (un titre sera présent au dessous).
- Et enfin, le vrai problème, les images devront être contenues dans un wrapper les entourant parfaitement afin qu'un effet graphique soit appliqué (ce qui exclu de passer l'image en background-image).
Mon boss aimerait que ça soit au maximum géré en CSS.
Compte tenu du fait qu'on affichera parfois un grand nombre d'images, il aimerait qu'on se passe au maximum du JavaScript.
Il me semble néanmoins inévitable d'avoir au minimum une classe indiquant l'orientation de l'image.
Malgré cela, je me retrouve bloqué car le wrapper ne s'adapte pas aux dimensions de l'image, puisqu'elle même doit être conditionnée par le conteneur de ce wrapper...
De mon point de vue, après pas mal d'essai et de réflexion, c'est un problème sans solution.
J'aimerais donc votre avis afin de confirmer le mien ou bien m'ouvrir de nouveaux horizons.
Voici mon code de test :
http://codepen.io/anon/pen/EaMOqX?editors=110
(le cadre rouge devrait être collé à l'image et on ne devrait donc pas voir le background jaune. Le tout devant être contenu dans le carré gris.)
http://www.developpez.net/forums/attachments/p173486d1427897789/webmasters-developpement-web/mise-page-css/heritage-dimensions-responsive-design/test.png/
En vous remerciant.
[ sujet ouvert également sur le forum de developpez.com ]
Je sollicite votre aide afin d'être vraiment certain que ce que j'essaie n'a pas de solution en CSS seul.
Je suis webdesigner et pour un projet je dois réaliser une mosaique d'images.
Voici les contraintes :
- L'environnement totalement responsive (pas de dimensions connus en pixel).
- Les images à afficher ont des ratios pouvant être très différents (portrait, paysage, panoramique...).
- Les images ne doivent être contenues dans un bloc type afin qu'il y ai une homogénéité d'ensemble.
- Les images devront être justifiées sur le bas du conteneur (un titre sera présent au dessous).
- Et enfin, le vrai problème, les images devront être contenues dans un wrapper les entourant parfaitement afin qu'un effet graphique soit appliqué (ce qui exclu de passer l'image en background-image).
Mon boss aimerait que ça soit au maximum géré en CSS.
Compte tenu du fait qu'on affichera parfois un grand nombre d'images, il aimerait qu'on se passe au maximum du JavaScript.
Il me semble néanmoins inévitable d'avoir au minimum une classe indiquant l'orientation de l'image.
Malgré cela, je me retrouve bloqué car le wrapper ne s'adapte pas aux dimensions de l'image, puisqu'elle même doit être conditionnée par le conteneur de ce wrapper...
De mon point de vue, après pas mal d'essai et de réflexion, c'est un problème sans solution.
J'aimerais donc votre avis afin de confirmer le mien ou bien m'ouvrir de nouveaux horizons.
Voici mon code de test :
http://codepen.io/anon/pen/EaMOqX?editors=110
(le cadre rouge devrait être collé à l'image et on ne devrait donc pas voir le background jaune. Le tout devant être contenu dans le carré gris.)
http://www.developpez.net/forums/attachments/p173486d1427897789/webmasters-developpement-web/mise-page-css/heritage-dimensions-responsive-design/test.png/
En vous remerciant.
[ sujet ouvert également sur le forum de developpez.com ]