Héritage de dimensions et responsive design

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.)

En vous remerciant.

Bonsoir,
on ne voit pas de cadre rouge ou de fond jaune.
Ensuite tu sembles déjà être à peu prés parvenu à ce que tu cherchais.
Par contre t'as pas besoin d'ajouter une image html pour ajouter les effets.
Tu as 2 autre solution via css:
> ajouter une contenu généré (avec comme content l'image) via un :before/:after au niveau du conteneur direct de l'image.
> Ajouter un contenu généré sous forme d'un cadre auquel il faudra ajouter un dégradé css avec valeur rgba pour la transparence.

Citation:

---

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...

---

Tu pourrais être plus clair?

Bonjour Erwan,

Oups, j'ai voulu changer en utilisant CodePen plutôt que JsFiddle et j'ai du coup pas pensé à faire un Fork avant de faire de nouveaux essais.
Bref, j'ai remis le test en état. Maintenant, tu verras bien le cadre rouge et le fond jaune. :)

Au niveau de l'application de l'effet (image ou CSS), rien n'est fixé.
Mais dans un cas comme dans l'autre, il me faut un conteneur suivant la taille de l'image (dont je ne connais pas le ratio) afin que l'effet s'ajuste convenablement.

Merci ;)

Ben on voit pas le bg jaune, tu as fais ce qu'il fallait.
Ou est-ce que ça bloc?

Il peut y avoir de heureux hasards de positionnement.
En modifiant la taille de la fenêtre, tu verras normalement apparaitre le problème.

Pièce jointe 173486

Un simple bug de Codepen, il suffit de rafraîchir pour qu'ils disparaissent.

Pas chez moi.
Et ça ne fonctionne pas non plus en direct sur Firefox (v36), ni sur IE (v10).
Ce code fonctionne (à tord d'ailleurs car ce n'est pas logique au niveau CSS) que sur Chrome (v41). :/

Le inline-block se comporte en effet assez bizarrement, mais ça fonctionne avec la valeur table.

Pourrais-tu me montrer le résultat avec un fork du CodePen ?
Parce que de mon coté je perd le respect des limites (max 100% de la hauteur et la largeur du carré gris) en utilisant le display table (les tableaux sont étirables).

:)