我试图弄清楚如何最好地使用自适应图像（srcset /大小）来适合我的模板并选择正确的图像进行加载。
我的模板基本上有3个断点： 最高1000像素：所有内容都在一栏中，占据宽度的100％ 最高1600像素：所有内容均位于两列中，近似比例为2/3-1/3 1600px以上：两个列4/5-1/5，但在第4/5列中，我有一个较小的列
对于1000px以下的模板，我使用以下尺寸：
(max-width: 1024px) calc(100vw - 20px)
效果很好，它占据了我想要的空间，这很简单，因为我不需要考虑其他列。
棘手的部分来自其他部分，因为其中一列内的图像大小取决于其他列的大小。无论如何，我都希望图像能占据100％的可用空间，但是在“尺寸”的情况下，我正在努力实现某些可行的方法。
对于最大1600像素，我有：
(max-width: 1600px) 66vw
这应该与模板中使用的比率相对应，但实际上，它永远达不到将图像拟合到父div内的目的。
对于最后一个断点，我有同样的问题，它要么太短要么太大。
这是一张图片的例子：
<amp-img src="https://www.laurentwillen.be/wp-content/uploads/sites/21/2018/05/xiaomi-redmi-note-5-face-up-down.jpg" alt="xiaomi redmi note 5" width="4000" height="1240" class="alignleft size-full wp-image-2620" srcset="https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down.jpg 4000w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-300x93.jpg 300w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-768x238.jpg 768w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-1024x317.jpg 1024w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-1400x434.jpg 1400w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-900x279.jpg 900w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-700x217.jpg 700w, https://test.laurentwillen.be/wp-content/uploads/sites/25/2018/05/xiaomi-redmi-note-5-face-up-down-500x155.jpg 500w" sizes="(max-width: 1024px) calc(100vw - 15px), (max-width: 1600px) 66vw, 50vw" /></amp-img>
如果我抑制“尺寸”，则它会以完整尺寸显示图像，从而使情况变得更糟。 AMP要求显示宽度和高度，所以我无法摆脱这一点，并且在使用PHP时，在加载页面之前找不到具有适当值的宽度和高度。
您有什么建议吗？
谢谢
洛朗