28172 sujets

CSS et mise en forme, CSS3

[Résolu] Max-width:50% de quoi?

Bonsoir

Je suis incapable de comprendre comment se calcule la largeur des images dans la section "Les tombes" de cette page

La hiérarchie est la suivante:

<body>
    <div id="container">
        <main id="pageBody">
            <section id="tombs">
                <table>
                    <tr>
                        <td>
                            <figure class="tile">
                                <img src="photo/icone_carte.jpg" alt = "">

Les largeur de tous ces éléments sont celles que j'attends.
Par contre pour obtenir la petite image, j'ai dû mettre
.... img{max-width:50%;}

Javais commencé par 25%, mais si je mets moins de 50% l'image devient minuscule.

Normalement cette largeur max se calcule à partir de la largeur de la balise <figure>, qui est 98% de celle de <td>, qui est elle même 50% de celle de <tr>, qui vaut celle de <table> qui vaut 100¨% de <section>
Avec les outils de tests, je trouve:
Largeur de <table> = largeur de <section> = largeur de <main> = 90% de largeur de <container> = 886px
Largeur de <td> = 50% de largeur de <table> = 440px
Largeur de <figure> = 98% de largeur de <td> = 431px
Largeur de <img> = 52px
La largeur "naturelle" de l'image étant 110px, je trouve donc que le "50%" s'applique à la largeur "naturelle" de l'image, et non à celle de son contenant.
Quelqu'un peut il m'expliquer ce phénomène bizarre?

Merci de votre aide
Salut Smiley smile

Bon j'essaie... mais je vais peut-être dire une conn.... Smiley smile

La balise <figure> possède 2 enfants directs, à savoir <img> et <figcaption>

Ces 2 enfants sont déclarés en table-cell ! Ce qui veux dire, indépendemment de la déclaration en display inline-table que tu as mis à la balise <figure> donc au parent Smiley sweatdrop

cela veut dire donc que <img> et <figcaption> vont se répartir l'espace !

Or tu as donné à figcaption une largeur de 75%
Donc <img> prendra 25%

Donc Smiley smile
si je ne m'abuse, à ta question "50% de quoi" et bien 50% de l'espace pris par <img> c'est à dire des 25% que tu lui as laissé Smiley sweatdrop

Si tu n'as rien compris à ce que j'ai écris, je te comprends Smiley smile

J'attends d'ailleurs qu'un maître alsanaute passe, pour voir comment il aurait fallut le dire
en supposant que ce que j'ai raconté soit vrai

Bien à toi Smiley smile
Modifié par Ethos (14 Feb 2017 - 20:10)
Bonsoir.

J'avoue que j'ai du mal à m'y retrouver...

Mais je pense que ce qui vous préoccupe à plutôt avoir avec le fait que figcaption (à droite) a une largeur - width - à 75%... l'image prend la place qui lui reste... diminuée de moitié.

Ce qui est intéressant est que tant qu'on ne met pas de valeur en pourcentage à sa largeur, l'image garde sa taille propre de 110px de large... quel que soit la valeur en pourcentage de la largeur de figcaption.

Smiley smile
Meilleure solution
Bonne remarque, j'avais oublié mon <figcaption> à 75%. C'est sans doute ça le problème, car <figure> est en display:table pour que le <figcaption> puisse être centré verticalement

Trop tard pour ce soir, je verrai ça demain.
@Zelena et Ethos
Bingo!
C'est exactement ça!

img, figcaption{display:table-cell;vertical-align:middle;}
figcaption{width:85%;
img {max-width:100%;}

me donne le résultat désiré.
En fait tout se passe comme si display:table-cell; provoquait la création de
<td><img ...></td><td><figcaption>...</figcaption></td>

et que les propriétés d’affichage étaient assignées à ces "<td> virtuelles".
Modifié par PapyJP (15 Feb 2017 - 11:52)
Administrateur
Bonjour,

ce sont les éléments img et figcaption qui ont directement le même comportement que celui que l'on connait pour TD.
Et si le parent n'est pas en display: table-row; et le grand-parent en display: table; , il y a création d'objets anonymes qui auront le comportement d'un TR et d'une table, cf. cette page du tuto sur le modèle tabulaire en CSS.

Il peut y avoir un intérêt à préciser explicitement que le parent est en display: table; pour pouvoir avoir l'autre modèle tabulaire, celui de table-layout: fixed;.
Dans ce mode le navigateur respecte les largeurs indiquées par les CSS tandis que par défaut c'est en fonction de la quantité relative de contenu et il fait au mieux avec les largeurs qu'on lui indique mais sans garantie Smiley smile (edit: c'est pas forcément évident avec une image qui va pas se faire couper en 2 ; ça l'est plus avec 2 "cellules" ayant beaucoup plus de contenu textuel l'une que l'autre ou pas)
Modifié par Felipe (15 Feb 2017 - 10:20)
Felipe a écrit :
ce sont les éléments img et figcaption qui ont directement le même comportement que celui que l'on connait pour TD.

Je dirais "pas vraiment": c'est ce que j'avais cru en mettant la largeur de <img> à 25% et celle de <figcaption> à 75%, et mon image s'est retrouvée en fait à 25%², c'est à dire 1/16 de la largeur de <figure>
S'ils avaient le même comportement qu'un <td> l'image aurait bien pris 25% de <figure>.
En mettant img{max-width:100%;}, c'est bien 100% d'un conteneur virtuel dont il s'agit, lequel conteneur virtuel prend ce qui reste une fois satisfaite la taille de <figcaption>.

Après j'ai galéré et comme je ne comprenais pas ce qui se passait, j'ai travaillé par essais et erreurs, ce qui est toujours une très mauvaise façon de faire.
J'avais fini par mettre img{max-width:25vw;} et j'ai laissé tomber jusque ces derniers jours, où j'ai repris le code et j'ai essayé de comprendre.

Merci en tout cas pour ce document que j'aurais mieux fait de lire plus tôt!

Edit: tout ça parce que je voulais centrer le texte verticalement par rapport à l'image! Sans doute y a-t-il un moyen moins contourné d'obtenir ce résultat?
Modifié par PapyJP (15 Feb 2017 - 11:53)
Sujet clos
Aller à