amp-img with caption center problem

The problem is on WordPress 5.0 with AMP Plugin v. 1.0.0
In previous version everything was OK with displaying images.

There is something wrong with style for image with caption-text, but I have no idea what… Could you please help me how I can fix it? Thank you for your help.

I’ve just back to AMP v 0.7.2, but below you can find AMP code of img with caption, and screen from:
website & console

<amp-img class="size-full wp-image-42425 amp-wp-enforced-sizes i-amphtml-element i-amphtml-layout-intrinsic i-amphtml-layout-size-defined i-amphtml-layout" src="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=680%2C491&ssl=1" alt="Mapa szybko?ci internetu mobilnego w Europie (3Q 2018) – pobieranie danych" width="680" height="491" srcset="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?w=1199&ssl=1 1199w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=600%2C433&ssl=1 600w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=768%2C555&ssl=1 768w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=1024%2C740&ssl=1 1024w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=300%2C217&ssl=1 300w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=720%2C520&ssl=1 720w" sizes="(max-width: 680px) 100vw, 680px" data-recalc-dims="1" layout="intrinsic" style="width: 100vw;"><i-amphtml-sizer class="i-amphtml-sizer">
        <img class="i-amphtml-intrinsic-sizer" src="data:image/svg+xml;charset=utf-8,<svg height=&quot;491px&quot; width=&quot;680px&quot; xmlns=&quot;https://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;/>">
      </i-amphtml-sizer><img decoding="async" alt="Mapa szybko?ci internetu mobilnego w Europie (3Q 2018) – pobieranie danych" srcset="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?w=1199&ssl=1 1199w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=600%2C433&ssl=1 600w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=768%2C555&ssl=1 768w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=1024%2C740&ssl=1 1024w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=300%2C217&ssl=1 300w, https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=720%2C520&ssl=1 720w" src="https://i0.wp.com/mobirank.pl/wp-content/uploads/2018/12/mapa-predkosci-pobierania-internet-mobilny-europa-3q-2018.jpg?resize=680%2C491&ssl=1" sizes="(max-width: 680px) 100vw, 680px" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>

• This reply was modified 5 years, 11 months ago by ?ukasz.

I think that, there should be CSS style:

(correct in ver 0.7.2 of plugin)

.i-amphtml-layout-intrinsic
display: inline-block;
position: relative;

instead (incorrect in v 1.0.0 plugin)

.i-amphtml-layout-responsive

display: block;

Where Can I change block on inline-block in plugin files? Thx

Thanks, Question About PR

Hi @lumay,
Thanks for bringing this up, and sorry for the delay.

Does this PR fix the issue for you?

https://github.com/ampproject/amp-wp/pull/1728

Maybe I didn’t capture what you had in mind, though.

Thanks!

@lumay Please confirm the fix as that will help us get v1.0.1 released shortly.

@westonruter
Nope, Please check it out: https://mobirank.pl/2018/12/05/raport-predkosc-internetu-mobilnego-w-europie-3q-2018/amp/
It doesn’t work..
I’ve added code to the style.php:

.amp-wp-article-content figure.wp-caption {
max-width: 100%;
}

@ryankienstra Thank you, but there is still problem with the image (with caption):
https://mobirank.pl/2018/12/05/raport-predkosc-internetu-mobilnego-w-europie-3q-2018/amp/

another images are dislaying correct for example: (images without caption):
https://mobirank.pl/2018/12/12/klienci-orange-posiadajacy-iphonea-moga-juz-korzystac-z-esim/amp/

• This reply was modified 5 years, 11 months ago by ?ukasz.

Please let me know if you check it out. Then I’ll return to AMP v. 0.7.2, thx

Hi @lumay,
Thanks for testing this, and you’re right that there’s still an issue.

Does the latest change work for you? It doesn’t have a figure before .wp-caption.

.amp-wp-article-content .wp-caption {
	max-width: 100%;
}

It looks like this fixes the issue in the link you shared:
https://mobirank.pl/2018/12/05/raport-predkosc-internetu-mobilnego-w-europie-3q-2018/amp/

Thanks!

• This reply was modified 5 years, 11 months ago by Ryan Kienstra.

@ryankienstra
Thank you so much! You are the best!!! It’s working now ??
I’ve changed on this:

.amp-wp-article-content .wp-caption {
	max-width: 100%;
}

• This reply was modified 5 years, 11 months ago by ?ukasz.

Thanks, @lumay! I’ll let you know when this fix is released in 1.0.1. It’ll probably be soon.

Hi @lumay,
Version 1.0.1 was just released, and it’s ready for download in /wp-admin.

It has a fix for the image issue you brought up.

Thanks for your patience.

@ryankienstra I’ve just installed v. 1.0.1 It looks like images display correct now! Thank you so much for your help!

Thanks, @lumay! That’s great to hear.