当放大器未激活时,图像如下所示:
<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-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,用amp img替换img标签。
如果不使用AMP,图像将保留在父DIV中,但在激活AMP时,它们会完全离开DIV。如果我尝试将父DIV设置为宽度的10%以查看发生了什么,我会看到父DIV占宽度的10%,但图像保持其大小,就像使用CSS float属性一样。
你可以在这里看到它的样子:
https://test.laurentwillen.be/gadgets/honor-8x-test-avis-et-prix/
我可以强制父DIV变小,但这不会影响图片。
你知道吗?
谢谢
劳伦特
