Wordpress image centrée et responsive avec caption

Bonjour

Par défaut Wordpress ne génère pas les images responsive quand il y a un caption !
J'ai rectifié ce pb, la seule difficulté qu'il me reste c'est que ne je peux pas avoir d'image centrée sinon le caption prend la largeur de toute la page.

Voici le code que j'ai pour l'instant :

<figure id="attachment_63" aria-labelledby="figcaption_attachment_63" class="wp-caption alignnone"><div class="figure-global"><img class="alignnone size-medium wp-image-63" src="xxx-300x225.jpg" alt="xxx" srcset="xxx-300x225.jpg 300w, xxx-768x576.jpg 768w, xxx.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px" width="300" height="225"><figcaption id="figcaption_attachment_63" class="wp-caption-text">
<div class="caption-legende"><span class="caption-credits">Crédit photos xxx sous <a href="">licence Creative Commons</a></span></div>
</figcaption></div></figure>

.wp-caption { display: table-cell; width: auto !important; }
.figure-global { position:relative}
.wp-caption .caption-legende { display: none; background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; bottom: 0; color: #fff; position: absolute; width: 100%;}
.wp-caption:hover .caption-legende { display: block; background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; bottom: 0; color: #fff; position: absolute; width: 100%; }
.wp-caption .caption-regular { display: block; margin: 10px 10px 0 10px; }
.wp-caption .caption-credits { display: block; margin: 0 10px 10px 10px; }
.wp-caption .caption-credits, .wp-caption .caption-credits a, .wp-caption .caption-credits a:hover { font-style: italic; color: #CCC; font-size: 10px; }

Si on remplace dans le code source html les 2 class alignnone par aligncenter avec ce complément de css :

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

le résultat n'est pas top : le bloc du caption prend toute la largeur au lieu d'être uniquement sur l'image.
Est-il possible de faire cela ? Merci

Bien sûr ! Je le fais sur tous mes WordPress.

Bref, il vous faut ajouter une propriété max-width.

Bonjour
Merci pour ta réponse, peux tu préciser comment tu fais ?
Parce que le max-with 100% sur img c'est ok pour le côté responsive mais cela ne change rien à mon problème de conteneur du caption.
Modifié par titi222 (03 Dec 2016 - 09:26)