Redface 2 · rendu des images · #876

Une image fait « 90 % »… de la colonne, pas de l'écran

Pourquoi une image mesurée occupe 90 % du texte mais paraît plus étroite — et ce que coûterait de passer à 95 ou 100 %.

image 863 px = 90 % de la colonne marge 47 px / côté padding post 61 px / côté sur l'écran : ≈ 80 %

01Anatomie d'une largeur

Mesuré au pixel sur une capture réelle (écran 1080 px). La largeur d'une image se lit en couches, du bord de l'écran vers le centre :

Padding du post — la marge de l'encart (carte), du bord d'écran jusqu'au texte. C'est le terrain de #884.
Marge de l'image — les 10 % restants, coupés en deux (5 % + 5 %). C'est le terrain de cette proposition.
Image — 90 % de la colonne de texte, jamais étirée au-delà (parité web RF1 : max-width: 90%).

02Essayez les deux leviers

Bougez la largeur d'image (cette proposition) et basculez l'encart (#884). Les deux se cumulent : c'est pour ça que « 90 % » peut donner beaucoup ou peu d'air selon l'encart.

Réglages

Aperçu proportionnel à un écran de 1080 px.

Décoché = posts pleine largeur, la piste de #884.

03Deux leviers indépendants

L'« air » autour d'une image a deux sources distinctes, gérées par deux morceaux de code différents. On peut toucher l'une sans l'autre — ou les deux.

Cette proposition · #876

Largeur de l'image dans la colonne

La constante de cap (90 %). Change la marge interne de l'image (les 47 px). L'encart et le texte ne bougent pas.

Chantier séparé · #884

Encart / posts pleine largeur

Le padding de la carte (61 px). Casse l'encart pour coller le contenu aux bords, comme d'autres apps. Concerne tout le post, pas que les images.

Ils se cumulent. Une image à 100 % dans un post encart reste bornée par les 61 px de padding. La même image à 90 % dans un post pleine largeur (#884) est déjà bien plus large. Pour du « bord à bord » total, il faut les deux — d'où l'intérêt de les décider ensemble, mais de les livrer séparément.

04Combien ça coûte côté code

Le « 90 % » ne vit pas dans une seule ligne : c'est une constante partagée avec les smileys, plus la boîte d'attente des blocs.

Ce qui pilote le 90 %OùPiège
SMILEY_RELATIVE_MAX_WIDTH_FRACTION images inline, blocs mesurés et smileys Partagée avec les smileys (#175). La bosser élargit aussi les smileys → interdit par le §9 du contrat.
COLD_BLOCK_WIDTH_FRACTION boîte d'attente d'un bloc non mesuré À garder cohérente avec la largeur finale sinon saut de layout au chargement.
Verdict
Trivial comme chiffre, pas comme changement. Le faire proprement = créer une constante image dédiée (IMAGE_RELATIVE_MAX_WIDTH_FRACTION), la câbler sur 3 chemins (inline / bloc mesuré / cold) et laisser les smileys à 0,9. ~15–20 lignes + tests. Mais c'est une modif du contrat gelé v1.4 (§6 largeur, §9 constantes) → amendement gaté par Sol et validé, jamais un tweak silencieux (gouvernance §0).

05Les trois valeurs

90 %
actuel · recommandé

Parité web RF1. Marge 47 px/côté. Respire, ne colle jamais au texte.

95 %
compromis

Marge 24 px/côté. Un peu plus large, garde un filet d'air. Bon candidat si « trop étroit ».

100 %
bord à bord

Marge 0 : l'image touche pile la largeur du texte. Cogne les cadres de citation et colonnes étroites — à valider en dogfood.

Pour du plein écran « comme les autres apps », c'est 100 % combiné à #884 (encart cassé). Sinon 95 % seul suffit souvent à répondre au « trop étroit ».