Redimensionnement d'image arbitraire et non proportionnel

[connrrr (Connor)]

Bonjour !

Lorsque notre forum utilisait Flarum, une chose amusante à faire était d’ajouter des balises de taille pour modifier la hauteur et la largeur d’une image afin de l’étirer et de la compresser, comme ceci (je me souviens peut-être mal de la façon dont la balise était écrite)

J’ai essayé d’utiliser des équivalents HTML sur les images téléchargées avec Discourse, mais tout ce que cela fait, c’est recadrer l’image.

Je ne vois aucun moyen de faire cela avec les images téléchargées dans Discourse. Ai-je tort ?

[Canapin (Coin-coin le Canapin)]

Lorsque l’image est grande et que vous modifiez ses dimensions, elle est automatiquement rognée en raison du CSS de la lightbox.

Même si vous la redimensionnez :

Les petites images peuvent être publiées avec le rapport d’aspect souhaité.

Il existe peut-être une solution très astucieuse, comme l’utilisation d’une classe autorisée pour la balise <img>, telle que avatar :

<img width="376" height="50" src="https://meta.discourse.org/secure-uploads/original/4X/b/e/6/be6f2ea64830fe0aaec6c192f3b39c38ce5f179c.png" class="avatar">

Mais cela force un border-radius.

L’original est carré et force une lightbox :

Si vous êtes administrateur, je dirais que le moyen le plus simple est d’utiliser un enroulement personnalisé et de définir une règle CSS. Par exemple :

[wrap=ratio]
!image|500x300](upload://raEVqkaMNqIXQ9YcsiZuYefukFu.png)
[/wrap]

[data-wrap="ratio"] .lightbox-wrapper img {
    object-fit: unset;
}

Je ne serais pas surpris s’il existait un moyen de forcer le rapport d’aspect en tant qu’utilisateur, ou même un moyen plus simple en tant qu’administrateur. Peut-être même pas utiliser un enroulement et forcer unset sur object-fit dans une div lightbox, mais cela pourrait perturber la mise en page normale. Je ne sais pas.