AMP图像超出DIV限制

Question

我试图在我的博客上使用AMP，将图像转换为AMP图像会导致图像从DIVs中消失，并破坏整个显示。

未激活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%，但图像保持其大小，就像它使用CSS浮动属性一样。

你可以在这里看到它的样子：https://test.laurentwillen.be/gadgets/honor-8x-test-avis-et-prix/我可以强制父DIV变小，但它不会影响图片。

你有什么想法吗？

谢谢

Laurent

Answer 1

你似乎已经将“sizes”的-attribute设置为"100vw“，直到浏览器宽度为4000px

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

更改父div的大小不会做任何事情，因为真正的内部是绝对定位的，所以不受父div宽度的影响。

我发现这篇文章很有帮助，也许对你也有帮助：

https://alistapart.com/article/using-responsive-images-now