[BBcode] Rendre l'affichage d'images conforme à HTML

[Le Grand Duc]

Rappel du premier message :

Bonjour,
Je crois qu'il y a belle lurette qu'en HTML, si on omet une des deux dimensions d'une image, l'autre est calculée automatiquement de manière à afficher l'image en respectant ses proportions.
Or ce n'est pas ce qui se passe ici avec la balise



... tout se passe comme si j'avais donné également 200 px de haut :

" />

Code:

[img(200px,200px)]https://images.radio-canada.ca/q_auto,w_1250/v1/ici-info/16x9/donald-trump-president-elections-rose-garden.jpg[/img]

[img]<br /><br />Si on veut simplement afficher une image moins grande qu'à l'origine, le seul moyen de contourner le problème est de trouver l'autre dimension et la préciser également après une règle de trois. C'est long et fastidieux.<br /><br />Donc ma proposition : <strong>rendre le fonctionnement de la balise
[/img]

[Luzz]

Bonjour,

Merci pour ces retours.

En revanche, il y a un petit souci (pas nouveau) avec les images sur la version mobile ^^
La règle suivante :
.post-content img.loaded, .post-content img.loading, .post-content img.error {
height: auto;
}
Est inactivée dès lors que des attributs height / width sont présents sur l'image ^^
Moralité, bah, c'est très moche Very Happy

Merci @chattigre pour le signalement, je remonte cette information à l'équipe technique

Bonne journée à tous

[Luzz]

@chattigre,

Je reviens vers vous à propos de ce souci en version mobile que vous avez signalé. Ce comportement nous semble normal, puisque la première règle sert justement à définir la hauteur automatiquement si elle n'est pas spécifiée. Dès lors que vous spécifiez les dimensions pour une image, vous n'avez plus besoin de cette règle et c'est les dimensions que vous avez indiquées qui vont emporter.

[chattigre]

Bonjour Luzz,
Le souci est que sur la version mobile, la largeur des images est systématiquement forcée à 100% maximum par ceci :

Code:

.post-content iframe, .post-content img {
   max-width: 100%;
}

Et c'est tant mieux, sinon la page serait défilable horizontalement ou l'image serait à moitié coupée (selon la propriété overflow-x j'entends )

Le souci, c'est que la largeur de l'image est limitée, mais pas la hauteur.
Ce qui fait que l'image est totalement déformée
Je vous remets la capture que j'ai faite, regardez la 2e image :

La hauteur et la largeur sont définies
MAIS : La largeur est requalifiée à 100% par max-width
ET : La hauteur est laissée telle quel
=> Les proportions de l'image sont déformées

Et je ne pense pas que ce soit terriblement visuel

Bonne journée !