Tuto Site
Box fit
Comment l’image (et la vidéo) remplit sa boîte sizeFixe. Parse : int 0–6 → BoxFit, défaut 2 cover. Select : getBoxFit → !isLarge ? box_fit_m : box_fit. Paint image : ServerImage(fit: content.getBoxFit) dans un SizedBox(width, height). Éditeur FR : box_section/media.dart.
Sans width × height calculés (px, %, ratio), sizeFixe peut être 0 : fit n’a alors rien à remplir.
Entier JSON → Flutter → libellé éditeur
| int | BoxFit | Éditeur FR | Comportement dans la boîte |
|---|---|---|---|
| 0 | fill | remplir | étire X et Y indépendamment. Distorsion. 100 % de la boîte, aucun crop |
| 1 | contain | max | scale uniforme, image entière. Bandes si ratio ≠ boîte. Live small page hero |
| 2 | cover | défaut | scale uniforme, boîte pleine, crop des bords |
| 3 | fitWidth | largeur | largeur = boîte, hauteur suit le ratio. Débordement Y possible |
| 4 | fitHeight | hauteur | hauteur = boîte, largeur suit. Débordement X possible |
| 5 | none | pas redimensionnée | taille intrinsèque du fichier. Risque overflow |
| 6 | scaleDown | égale | contain mais ne grandit jamais. Logos |
"box_fit": 2, "box_fit_m": 1
Desktop cover (hero croppé) / mobile contain (produit entier visible).
T16 — boîte 400×300, image 800×400 (ratio 2)
| int | Résultat |
|---|---|
| 0 fill | 400×300 distordu |
| 1 contain | image 400×200 centrée + bandes H 50+50 |
| 2 cover | image scale 0.75 → 600×300 crop 100 px L+R |
| 3 fitWidth | 400×200 |
| 4 fitHeight | 600×300 crop ou overflow X |
| 5 none | 800×400 overflow |
| 6 scaleDown | contain (image plus grande que boîte) |
Vidéo : FittedBox(fit:) dans SizedBox.expand. Plein écran forcé : BoxFit.contain, ignore le JSON. Back de page : mêmes int 0–6 sur fit_image_d / fit_video_*.
image_pos Segment — commentaire entité faux
Consommé par id_text (Segment), cards, FAQ — pas par id_image. positionImg = isLarge ? image_pos : image_pos_m. Éditeur = vérité (pas le commentaire périmé 0 Top 1 Bottom… de view_content.dart).
| int | Éditeur | Layout Segment |
|---|---|---|
| −1 | arrière | image en fond (Stack derrière le texte) |
| 0 | haut | image au-dessus du texte, largeur 100 % (défaut fromJson) |
| 1 | gauche | image à gauche (~40 %), texte à droite (~60 %) |
| 2 | droite | image à droite (~40 %), texte à gauche |
| 3 | bas | image sous le texte, largeur 100 % |
{
"type": "8d669b32-e168-11ed-b5ea-0242ac120002",
"image": "<uuid>",
"image_pos": 1,
"image_pos_m": 0,
"box_fit": 2,
"when_title": 0
}
JSON sûr image :
"width": { "l": { "i": 100, "iT": "%" } },
"height": { "l": { "i": 1.2, "iT": "ratio" } },
"image": "<uuid fichier>",
"box_fit": 2,
"box_fit_m": 2
image_pos: 1 lu comme « bottom ». Live = gauche. box_fit sans boîte width×height. Cercle : cover (2), pas contain.