Development #40417
Toutes les images flexibles par défault
0%
Description
Rendre les images flexibles par défaut ?
Rappel,
une image flexible est une image qui s'adapte : se réduit ou s’agrandit de manière homothétique pour s'adapter à la largeur de la boite parent, sans dépasser sa taille réelle.
img { max-width: 100%; height: auto;
Ce mode est activé par défaut pour les affichages mobiles voir #31875
Le fait qu'il ne soit pas appliqué sur destop entraînent parfois un débordement de l'image au delà de son conteneur ou un refus pour flexbox de réduire la boite parent. Typiquement sur des images au sein des cellules texte
Le fait qu'il soit appliqué sur mobile ne suffit pas pour que l'image se réduise de manière homothétique. En effet, ckeditor ajoute une prop CSS `height` et `width` à la balise image. L'image va se réduire horizontalement uniquement. Il faut donc penser à supprimer ces attributs via ckeditor pour que l'image devienne flexible.
Fichiers
Demandes liées
Révisions associées
Historique
Mis à jour par Frédéric Péters il y a environ 4 ans
- Lié à Development #16669: Ne pas laisser ckeditor forcer par défaut les dimensions de l'image ajouté
Mis à jour par Thomas Jund il y a environ 4 ans
- Lié à Development #31875: par défaut limiter les images à 100% de largeur ajouté
Mis à jour par Thomas Jund il y a environ 3 ans
- Fichier amiens-images-telepaiement.png amiens-images-telepaiement.png ajouté
- Assigné à mis à Thomas Jund
Je déterre ce ticket.
L'update du system de layout des colonnes sera affecté aussi si les images insérées via CKeditor sont plus larges (avec styles width et height que la largeur d'une colonne.
C'est déjà le cas mais avec float : les images débordent (voir capture). Avec flexbox c'est la largeur de la colonne qui va être impacté.
S'il est compliqué de modifier le comportement de ckEditor. On peut forcer en css une hauteur auto :
.textcell img { height: auto !important; }
Ce qui veut dire que seul `width` restera paramétrable depuis ckeditor. Modifier `height` ne fera plus rien.
Avis bienvenu.
Mis à jour par Frédéric Péters il y a environ 3 ans
Revert du changement sur les colonnes si le risque est d'avoir des sites de prod en vrac ?
Mis à jour par Thomas Jund il y a environ 3 ans
Le layout des colonnes n'est pas encore en flexbox. C'est un dev en cours, pas pour tout de suite.
ce serait bien de lever ce problème avant.
Mis à jour par Frédéric Péters il y a environ 3 ans
Ok, je n'avais pas compris ça. Concernant ckeditor j'ai levé la question il y a longtemps : #16669. (mais je serais de ce côté à abandonner et à passer du temps sur notre propre réalisation).
Ce qui veut dire que seul `width` restera paramétrable depuis ckeditor. Modifier `height` ne fera plus rien.
De ton dump tu peux voir tous les <img> et vérifier que nulle part il y aurait juste height positionné ? (sur l'idée que si width et height sont positionnés, ils le sont de manière à garder le bon ratio quand même).
Mis à jour par Thomas Jund il y a environ 3 ans
C'était sport pour moi, mais voilà
- 829 cellules "text" utilisent des images
- 1507 images
- 5 images ont une prop `height` et pas `width`
<img alt=\"\" src=\"/media/uploads/2020/04/09/grc_metropole_mono2_laq2ci5.svg\" style=\"height: 90px;\" /> <img alt=\"\" src=\"/media/uploads/2019/07/08/metz-metropole.png\" style=\"float: left; height: 80px;\" /> <img alt=\"\" src=\"/media/uploads/2019/07/08/metz.png\" style=\"float: left; height: 80px; margin-left: 40px; margin-right: 40px;\" /> <img alt=\"\" src=\"/media/uploads/2019/07/08/europe.png\" style=\"float: right; height: 100px;\" /> <img alt=\"\" src=\"/media/uploads/2020/10/24/logohautesalpesrouge.png\" style=\"height: 60px; float: right;\" />
C'est essentiellement en couplant avec une propriété `float`
Mis à jour par Thomas Jund il y a plus de 2 ans
- Lié à Bug #58730: [Contenu d'une fiche] - img ne s'adapte pas à la taille du contenant ajouté
Mis à jour par Thomas Jund il y a plus d'un an
- Statut changé de Nouveau à En cours
Je déterre ce ticket qui garde toute sa pertinence.
Je propose de basculer les images en flexible par défaut (sur tous les viewport) et on continue à corriger les cas ckEditor à la main en intervenant sur les attributs `height & width` au besoin.
Mis à jour par Robot Gitea il y a plus d'un an
- Statut changé de En cours à Solution proposée
Thomas Jund (tjund) a ouvert une pull request sur Gitea concernant cette demande :
- URL : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/62
- Titre : css: declare all images flexible by default (#40417)
- Modifications : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/62/files
Mis à jour par Robot Gitea il y a plus d'un an
- Statut changé de Solution proposée à Solution validée
Corentin Sechet (csechet) a approuvé une pull request sur Gitea concernant cette demande :
- URL : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/62
- Commentaire :
N/A
Mis à jour par Robot Gitea il y a plus d'un an
- Statut changé de Solution validée à Résolu (à déployer)
Thomas Jund (tjund) a mergé une pull request sur Gitea concernant cette demande :
- URL : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/62
- Titre : css: declare all images flexible by default (#40417)
- Modifications : https://gitea.entrouvert.org/entrouvert/publik-base-theme/pulls/62/files
Mis à jour par Transition automatique il y a plus d'un an
- Statut changé de Résolu (à déployer) à Solution déployée
css: declare all images flexible by default (#40417)