amp-html - 超出 DIV 限制的 AMP 图像

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 来用 amp-img 替换 img 标签。

如果没有 AMP，图像会保留在父 DIV 中，但激活 AMP 后，它们会完全脱离 DIV。如果我尝试将父 DIV 设置为宽度的 10% 以查看会发生什么，我会看到父 DIV 占用了 10% 的宽度，但图像保持其大小，就好像它使用 CSS 浮动属性一样。

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

你有什么主意吗？

谢谢

洛朗

标签： amp-htmlresponsive-images

Answer 1

看来您已将“sizes”属性设置为“100vw”，浏览器宽度为 4000px

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

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

我发现这篇文章很有帮助，也许它对你也有用：
https ://alistapart.com/article/using-responsive-images-now