放大器图像超出DIV限制
我试图在我的博客上使用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-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替换imghtml" target="_blank">标签。
如果没有AMP，图像会停留在父DIV内，但如果激活AMP，则图像会完全脱离DIV。如果我尝试将父DIV设置为宽度的10%以查看发生了什么，我会看到父DIV占据了宽度的10%，但图像会保持其大小，就像使用CSS float属性一样。
您可以在此处看到它的外观：https://test.laurentwillen.be/gadgets/honor-8x-test-avis-et-prix/ 我可以强制父DIV变小，但不会影响图片。
你知道吗？
谢谢
洛朗
共有1个答案
似乎您已经将“大小”属性设置为“100vw”，最大浏览器宽度为4000px
sizes="(max-width: 4000px) 100vw, 4000px"
更改父div的大小没有任何作用，因为真正的内部是绝对的，所以不受父div宽度的影响。
我觉得这篇文章很有用，也许对你也有用：
https://alistapart.com/article/using-responsive-images-now
-
我对图像进行了收缩缩放，但是当我第一次加载应用程序时，整个图像不可见，只有一部分。图像填充了屏幕的宽度，但其上下都有空白。此外，当缩放图像时，图像变得非常短。纵横比应保持不变。 我希望在应用程序加载时使整个图像可见，然后我希望能够用两根手指缩小图像，其中图像不会小于屏幕的大小，以便屏幕始终充满（图像是地图）。 为了放大，图像应该超出手机屏幕的宽度和高度。这样我就可以平移过去查看地图的细节。 任何帮
-
本节，我们将创建一个十分优雅的图像放大器。创建方法是，根据鼠标的坐标，把大图的一部分裁剪出来，并显示在小图之上。 图6-6 创建图像放大器 操作步骤 按照以下步骤，创建一条图像放大器，当用户把鼠标移动到图像上，该放大镜渲染被放大的图像的一部分： 1. 链接到Events类： <script src="events.js"> </script> 2. 创建一个图像加载函数，来加载小图和大图，图像加
-
问题内容： 我已经将图像内的边框设置为none。我现在想将该图像放在其包含div的中心。我曾尝试使用，但没有用。 我敢肯定，我忽略了一些愚蠢的事情，但是我想得到stackoverflow社区的帮助，所以这并不需要我花一个小时盯着屏幕来弄清楚。非常感谢。 这是CSS … 问题答案： 尝试将图片的属性设置为：
-
我有一个滚动的新闻报价器，但图像和文本是溢出的报价器框？请帮助我尝试了“溢出：隐藏；”，“位置：相对；”并设置框的自定义高度和宽度,但问题仍然存在。请参阅此处https://thenewsair.com/
-
如何在div中适合图像？图像大小可以是最大然后div或最小然后div。 html代码 CSS代码 如何使用以下设置图像css： 图像高度100和宽度100 图像高度300和宽度300
-
问题内容： 我想拍摄一张图像并更改图像的比例，虽然它是一个numpy数组。 例如，我有一个可口可乐瓶的图像： bottle-1 转换为一个numpy的形状数组，我想调整其大小以表示第二个图像的大小： bottle-2 形状为。 如何在保持原始图像的同时将图像尺寸更改为特定形状？其他答案建议每隔一行或第三行剥离，但是我想要做的基本上是像通过图像编辑器（但在python代码中）那样收缩图像。是否有任何