[Résolu] Flexbox et déformation d'un élément picture

Bonjour,

Nous savons tous que flexbox déforme le ratio des images s'il est utilisé sur ces dernières. Il faut donc recourir à une actuce, par exemple inclure l'image dans une div, ce que j'ai fait ici et cela fonctionne (cliquez par exemple sur l'image en orientation portrait) : Images.

Ce premier exemple est issu de mon framework perso. Or, quand j'essaie de transposer ce framework html/css en thème WordPress j'ai un bug que je n'arrive pas à trouver (cliquer sur l'image du "soldat goutte d'eau") : Page de test.

La feuille de styles est la même, la différence de rendue est peut-être dûe au html ? Mais je deviens aveugle... j'ai besoin d'autres yeux que les miens :

Le html de mon framework html :

<figure class="figure-focus">
            <picture>
              <source media="(min-width: 2000px)" srcset="../Images/Demo/OldMechanism.jpg 2500w" sizes="100vw">
              <source media="(min-width: 1500px)" srcset="../Images/Demo/OldMechanism2000.jpg 2000w" sizes="100vw">
              <source media="(min-width: 1000px)" srcset="../Images/Demo/OldMechanism1500.jpg 1500w" sizes="100vw">
              <source media="(min-width: 800px)" srcset="../Images/Demo/OldMechanism1000.jpg 1000w" sizes="100vw">
              <source media="(min-width: 600px)" srcset="../Images/Demo/OldMechanism800.jpg 800w" sizes="100vw">
              <source media="(min-width: 400px)" srcset="../Images/Demo/OldMechanism600.jpg 600w" sizes="100vw">
              <source media="(min-width: 300px)" srcset="../Images/Demo/OldMechanism400.jpg 400w" sizes="100vw">
              <source srcset="../Images/Demo/OldMechanism300.jpg 300w" sizes="100vw"><img src="../Images/Demo/OldMechanism.jpg" alt="Old Mechanism">
            </picture>
  <figcaption>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</figcaption>
</figure>

Le html généré par WordPress :

<picture>
<img src="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau.jpg" alt="Un soldat goutte d'eau" width="1515" height="2055">
<source srcset="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau-1000x1356.jpg 1000w media="(min-width: 800px)" sizes="100vw">
<source srcset="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau-1500x2035.jpg 1500w media="(min-width: 1000px)" sizes="100vw">
<source srcset="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau-800x1085.jpg 800w media="(min-width: 600px)" sizes="100vw">
<source srcset="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau-600x814.jpg 600w media="(min-width: 400px)" sizes="100vw">
<source srcset="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau-400x543.jpg 400w media="(min-width: 300px)" sizes="100vw">
<source srcset="http://siteName/wp-content/etc/Un-soldat-goutte-d-eau-300x407.jpg 300w" sizes="100vw">
</picture>
<figcaption>Un soldat goutte d&rsquo;eau</figcaption>
</figure>

Modifié par Olivier C (07 Jun 2016 - 13:53)

Il suffit de poser la question pour trouver la réponse : a priori le problème provient de la balise image indiquée avant les <sources> dans l'élément <picture>.

EDIT : non, ça ne change rien en fait, je viens de vérifier. Mais du coup pour moi le mystère reste entier...
Modifié par Olivier C (07 Jun 2016 - 14:52)

Après des tergiversations j'ai trouvé : la définition des attributs width et height empêchait le responsive. Je vais les laisser dans le code mais les supprimer au moment où le script js clone l'image pour le zoom...

Sujet résolu.