[Résolu] Mise au point

Bonjour à tous

Je me rends compte que cette page ne s'affiche pas correctement sur iPhone, alors que la simulation iPhone sur Chrome et FireFox est correcte.
On voit sur les images suivantes que l'image "déborde", ou plus exactement que la balise <figure> qui la contient ne prend pas la bonne taille, avec comme résultat un chevauchement du texte sur l'image.
Saisie d'écran sur iPhone/Safari:


sur Chrome:


sur FireFox:


Pourriez vous me conseiller sur la façon de résoudre ce problème?

Merci de votre aide
Modifié par PapyJP (08 Mar 2017 - 22:08)

Bonjour,
vous pouvez rajouter dans le CSS et voir ce que cela donne :
img {
max-width: 100%;
height: auto;
}

C 'est sans garantit que cela marche

Non seulement ça ne marche pas, mais ça donne un résultat inacceptable.
Vous pouvez voir ce que ça donne dans cette page de test

Le max-width de <img> est à 80vw, la balises <figure> est en display:inline-table, c'est à dire que ce n'est pas l'image qui dépend de la largeur de <figure>, mais au contraire c'est la balise <figure> qui est sensée "se mouler" autour de l'image.
Cela marche très bien, y compris sur iPad/Safari mais pas sur iPhone/Safari.
Il doit y avoir une différence subtile que je ne comprends pas.

Edit: si je mets l'iPhone en mode "horizontal", tout se passe correctement. Il doit s'agir d'une "anomalie" (expression politiquement correcte pour "bug") mais il serait bien de trouver un contournement, car inutile de compter sur le support Apple!
Modifié par PapyJP (08 Mar 2017 - 22:09)