IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Héritage de dimensions et responsive design


Sujet :

Responsive design en CSS

  1. #1
    Membre à l'essai
    Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2013
    Messages : 11
    Points : 13
    Points
    13
    Par défaut 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.

  2. #2
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    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.

    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?

  3. #3
    Membre à l'essai
    Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2013
    Messages : 11
    Points : 13
    Points
    13
    Par défaut
    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

  4. #4
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Ben on voit pas le bg jaune, tu as fais ce qu'il fallait.
    Ou est-ce que ça bloc?

  5. #5
    Membre à l'essai
    Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2013
    Messages : 11
    Points : 13
    Points
    13
    Par défaut
    Il peut y avoir de heureux hasards de positionnement.
    En modifiant la taille de la fenêtre, tu verras normalement apparaitre le problème.

    Nom : test.png
Affichages : 219
Taille : 237,7 Ko

  6. #6
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Un simple bug de Codepen, il suffit de rafraîchir pour qu'ils disparaissent.

  7. #7
    Membre à l'essai
    Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2013
    Messages : 11
    Points : 13
    Points
    13
    Par défaut
    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). :/

  8. #8
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    Le inline-block se comporte en effet assez bizarrement, mais ça fonctionne avec la valeur table.

  9. #9
    Membre à l'essai
    Profil pro
    Webdesigner
    Inscrit en
    Mai 2013
    Messages
    11
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2013
    Messages : 11
    Points : 13
    Points
    13
    Par défaut
    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).


Discussions similaires

  1. [Drupal] Problème affichage Responsive Design template Fusion Fusion Accelerator
    Par mealtone dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 0
    Dernier message: 03/12/2012, 00h47
  2. css responsive design = spécialité ?
    Par guitz dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 05/11/2012, 15h16
  3. "fusion" d'objet dimension dans le designer
    Par Nico_140886 dans le forum Designer
    Réponses: 5
    Dernier message: 16/03/2011, 13h13
  4. Utiliser un héritage de JPanel en mode Design
    Par bulldozer27350 dans le forum NetBeans
    Réponses: 1
    Dernier message: 09/02/2010, 11h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo