image - (amp) 图像向右浮动可能不会超过 100%

Question

这是关于 AMP 页面的，问题是图像的大小确实超出了原始格式，不知道如何解决。

我喜欢实现：

• 漂浮在右侧的图像（文本围绕它流动）
• 最多占据视口的 40%
• 如果 40% 的视口小于原始图像尺寸，则图像必须缩小到原始尺寸以下
• 图像可能不会超过原始大小
• css 部分应该适用于所有大小的图像（因此 css 部分中没有图像大小规范）
• 如果某个视口中的 40% 大于图像的原始大小，则包含图像的 div 可能不会增长超过图像的原始大小

由于 AMP，在 html 代码中指定图像大小当然没有问题。

编码：

<style amp-custom>
    .right40 {float:right;max-width:40%}
    amp-img {max-width:100%} 
</style amp-custom>

<div class="right40">
    <amp-img src="picture.png" height="100" width="200" layout="responsive"></amp-img>
</div>

我注意到如果没有指定最小宽度，则不会显示图像。所以我添加了 100px 的最小宽度，但随后图像被固定为 100px。

<style amp-custom>
    .right {min-width:100px;float:right;max-width:40%}
    amp-img {max-width:100%} 
</style amp-custom>