Изображение AMP выходит за пределы DIV

Question

Я пытаюсь использовать AMP в своем блоге, и преобразование изображений в изображения AMP приводит к тому, что изображения выходят из DIV и разбивают весь экран.

Когда AMP не активирован, изображения выглядят следующим образом:

<img class="alignleft size-full wp-image-3654" src="https://www.laurentwillen.be/wp-content/uploads/sites/21/2018/10/honor-8x-test-avis-review-photo-taille-main.jpg" alt="honor 8x test avis review photo taille main" width="2500" height="1875" srcset="https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main.jpg 2500w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-300x225.jpg 300w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-768x576.jpg 768w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-1024x768.jpg 1024w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-1400x1050.jpg 1400w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-900x675.jpg 900w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-700x525.jpg 700w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-500x375.jpg 500w" sizes="(max-width: 2500px) 100vw, 2500px" />

Когда AMP активирован, они выглядят так:

<amp-img  class="alignleft size-full wp-image-3654" src="https://www.laurentwillen.be/wp-content/uploads/sites/21/2018/10/honor-8x-test-avis-review-photo-taille-main.jpg" alt="honor 8x test avis review photo taille main" width="2500" height="1875" srcset="https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main.jpg 2500w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-300x225.jpg 300w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-768x576.jpg 768w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-1024x768.jpg 1024w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-1400x1050.jpg 1400w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-900x675.jpg 900w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-700x525.jpg 700w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/10/honor-8x-test-avis-review-photo-taille-main-500x375.jpg 500w" sizes="(max-width: 2500px) 100vw, 2500px" / layout="responsive" /></amp-img>

Я просто выполнил preg_replace, чтобы заменить теги img на amp-img.

Без AMP,изображения остаются в родительских DIV, но с активированным AMP они полностью выходят из DIV.Если я попытаюсь установить родительский DIV на 10% ширины, чтобы посмотреть, что произойдет, я увижу, что родительский DIV занимает 10% ширины, но размер изображения остается таким же, как если бы он использовал свойство float CSS.

Вы можете посмотреть, как это выглядит здесь: https://test.laurentwillen.be/gadgets/honor-8x-test-avis-et-prix/ Я могу заставить родительский DIV быть меньше, но это не влияет на изображения.

У вас есть идеи?

Спасибо

Лоран

Answer 1

кажется, вы установили атрибут "sizes" равным "100vw" до ширины браузера 4000px

sizes="(max-width: 4000px) 100vw, 4000px"

изменение размера родительского div ничего не делает, потому чтовнутри действительно позиционируется абсолют, поэтому не зависит от ширины родительского div.

Я нашел эту статью полезной, может быть, она также полезна для вас:
https://alistapart.com/article/using-responsive-images-now