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 :

Aligner verticalement une image plus grande dans un div


Sujet :

Positionnement en CSS

  1. #1
    Membre à l'essai
    Inscrit en
    novembre 2006
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : novembre 2006
    Messages : 18
    Points : 13
    Points
    13
    Par défaut Aligner verticalement une image plus grande dans un div
    Bonjour à tous,
    Je me heurte au problème suivant :
    j'aimerais centrer verticalement une image dans un div.

    Ceci fonctionne lorsque l'image est plus petite :
    http://jsfiddle.net/Cthulhu/QHEnL/1/

    Mais pour une image plus grande (qui sera tronquée par un overflow:hidden sur le div container) cela ne marche plus, l'image se ferre en haut à gauche. Exemple : http://jsfiddle.net/Wjxy8/1/


    J'ai parcouru tout google sans succès, essayé avec des <td>, des div "helper", .... rien à faire ...

    J'ai également réussi en utilisant la propriété background-image naturellement, mais cette solution est déplaisante car en l'absence d'une vraie image cela est mal reconnu par facebook par exemple .. J'aimerais donc réussir avec une balise <img>

    Quelqu'un aurait une idée? :-)


    Merci !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 753
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 753
    Points : 39 987
    Points
    39 987
    Par défaut
    Bonjur,
    J'ai parcouru tout google sans succès,
    certes mais pas la Comment centrer verticalement un élément block ?

  3. #3
    Membre averti
    Profil pro
    Chef Gérant
    Inscrit en
    octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : octobre 2005
    Messages : 230
    Points : 399
    Points
    399
    Par défaut
    bonjour/bonsoir.

    quelque chose comme ça ? http://codepen.io/gcyrillus/pen/BdtEj

    Qui donnerait ceci : http://jsfiddle.net/Wjxy8/2/

    Le principe est de donnée à l'image une taille virtuelle de 0 .
    les marges négatives qui lui sont appliquées réduisent l'espace qu'il lui est nécessaire pour s'afficher et ne vient pas se 'cogner' contre les bords mais les absorbe

  4. #4
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 49
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Hello,

    Je n'ai jamais aimé été très convaincue par la technique de centrage utilisant le line-height Je l'ai toujours considéré comme une forme de "magouille" (au même titre que l'ajout d'un overflow, pourtant bien pratique, dans l'unique but de gérer les flottants par exemple). Peut-être à tort ?

    En tous cas, l'espacement prévu pour l'empattement pose problème dans ton exemple de base. Attribue une hauteur de 120px à ton image pour constater que le centrage vertical est imprécis... :-/ c'est d'ailleurs d'autant plus flagrant en fonction du font-size par défaut de l'utilisateur; on visualise bien le problème avec un zoom texte seul sur FF (sauf erreur un font-size de 0 permet d'éviter le problème, hors zoom text seul ;p)

    Pour ma part, c'est typiquement le genre de situation que je résoudrais par un centrage en absolute. L'idée est d'utiliser les marges auto pour le centrage, ce qui fonctionne en attribuant, en général, la valeur de 0 aux 4 propriétés de positionnement top, bottom, right et left. Sauf qu'avec 0, on obtiendra le même problème que toi; une image plus grande se collera au haut à gauche et donc le coin haut gauche sera affiché.

    L'idée est donc d'attribuer les mêmes valeurs négatives à top et bottom,right et left pour maintenir le centrage sur une image plus grande (au minimum la moitié des dimensions de l'image la plus grande) en "élargissant" la surface à disposition. Par exemple:

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .img_thumb {
        float: left;
        height: 120px;
        margin-bottom: 5px;
        margin-left: 9px;
        width: 147px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 3px;
        position:relative;
        overflow:hidden;
    }
     
    .img_thumb img {
        position:absolute;
        margin:auto;
        top:-2000px;left:-2000px;right:-2000px;bottom:-2000px;
    }
    Le - est la rétocompatiblité: IE8 +. Si IE7 accepte le renseignement des propriétés opposées (top et bottom, left et right, contrairement à IE6 qui ne sais pas quoi en faire), il est incapable d'effectuer le centrage avec les marges auto... Donc à gérer pour que l'information soit tout de même accessible IE7- (genre en supprimant les valeurs négatives pou eux et osef du centrage)
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  5. #5
    Membre averti
    Profil pro
    Chef Gérant
    Inscrit en
    octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : octobre 2005
    Messages : 230
    Points : 399
    Points
    399
    Par défaut
    Si l'option est d'utiliser le positionnement absolu pour du clippage, autant se servir de clip https://developer.mozilla.org/fr/docs/CSS/clip compatible depuis IE4 et version 1 des autres navigateurs. c'est depuis CSS2 , il me semble .

    ++

  6. #6
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 49
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Il est vrai que je voyais la propriété clip moins rétrocompatible que ça. J'imagine que j'avais dû foirer mes tests à l'époque ^^

    Par contre j'imaginais que la problématique reposait sur le centrage d'une image de taille indéterminée. A première vue, je ne vois pas comment déterminer les coordonnées pour le clip d'un rectangle de taille précise centré sans tenir compte des dimensions de l'image ?
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  7. #7
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Candygirl : n'as-tu pas une réponse sur cet article : http://tympanus.net/codrops/2013/01/...clip-property/

    Salut au fait...
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  8. #8
    Membre averti
    Profil pro
    Chef Gérant
    Inscrit en
    octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : octobre 2005
    Messages : 230
    Points : 399
    Points
    399
    Par défaut
    Citation Envoyé par Candygirl Voir le message
    Il est vrai que je voyais la propriété clip moins rétrocompatible que ça. J'imagine que j'avais dû foirer mes tests à l'époque ^^

    Par contre j'imaginais que la problématique reposait sur le centrage d'une image de taille indéterminée. A première vue, je ne vois pas comment déterminer les coordonnées pour le clip d'un rectangle de taille précise centré sans tenir compte des dimensions de l'image ?
    tout à fait , d'où ma proposition sur un line-height ( hauteur connue du parent ) et d'une réduction de l'espace d'affichage requis de l'image via des marges négatives.

    Le positionnement absolu à fait ses preuves et est bien connu, j’apportai un autre point de vu, aucun n'as ma préférence.
    .

    ++

  9. #9
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 49
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Citation Envoyé par rodolphebrd Voir le message
    Candygirl : n'as-tu pas une réponse sur cet article : http://tympanus.net/codrops/2013/01/...clip-property/
    Ben euh...non Tu me fais un exemple ?
    Citation Envoyé par rodolphebrd Voir le message
    Salut au fait...
    Coucou aussi ^^
    Citation Envoyé par CCyrillus Voir le message
    tout à fait , d'où ma proposition sur un line-height ( hauteur connue du parent ) et d'une réduction de l'espace d'affichage requis de l'image via des marges négatives.
    Que je trouve fort intéressant comme nombre de tes propositions que j'aime toujours découvrir
    Citation Envoyé par CCyrillus Voir le message
    Le positionnement absolu à fait ses preuves et est bien connu, j’apportai un autre point de vu, aucun n'as ma préférence.
    Je pense que le centrage d'un absolut avec les marges auto, particulièrement intéressant sur les images, est justement assez peu connu et mérite d'être énoncé, tout comme la problématique de l'imprécision du centrage avec le line-height, présente dans la plus part des exemples exposés mais rarement relevée.
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  10. #10
    Expert confirmé
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : novembre 2012
    Messages : 2 336
    Points : 5 443
    Points
    5 443
    Par défaut
    Citation Envoyé par Candygirl
    Tu me fais un exemple ?
    Oui mais avec la propriété transform qui est moins rétrocompatible. /^o^\
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="box">    
      <div class="content">
       <img src="http://lorempixel.com/400/400/animals/9" />
      </div>
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .box {
        position:relative;
        width: 300px; 
        margin: 0 auto; 
        height: 200px;  
     }
    .content img {
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    http://codepen.io/anon/pen/dHvLc
    Pensez à
    lire les règles du forum effectuer une recherche préalable
    utiliser la balise code (#) éditer votre code sur Codepen, Dabblet, Jsfiddle
    clore votre post avec le bouton

  11. #11
    Membre émérite
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 49
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 907
    Points
    2 907
    Par défaut
    Tricheur !! ;p

    En dehors de la rétrocompatibilité, j'aime beaucoup l'utilisation du translate dont l’utilisation me semble bien correspondre à la logique de la situation
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

Discussions similaires

  1. Aligner verticalement une image sur une ligne
    Par Tristan Zwingelstein dans le forum Word
    Réponses: 4
    Dernier message: 24/08/2010, 02h46
  2. [Joomla!] mettre une bannière plus grande dans l'emplacement d'une petite
    Par fatjoe dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 10
    Dernier message: 05/04/2010, 15h29
  3. Aligner verticalement une image et du texte
    Par Flackou dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/11/2008, 16h01
  4. afficher une image plus grande sans chargement initial
    Par Phiss dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 21/02/2008, 18h30
  5. Réponses: 5
    Dernier message: 29/07/2006, 01h35

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