Image (amp)图像右浮动不能超过100%

Image (amp)图像右浮动不能超过100%,image,amp-html,Image,Amp Html,这是关于AMP页面的,问题是图像的大小超出了原始格式,不知道如何修复它 我希望实现: 右侧浮动的图像(文本在其周围流动) 最多占据视口的40% 如果40%的视口小于原始图像大小,则图像必须缩小到原始大小以下 图像不能超出原始大小 css部分应该处理所有大小的图像(因此css部分中没有图像大小规范) 如果某个视口中的40%大于图像的原始大小,则包含图像的div可能不会超出图像的原始大小 当然,由于AMP,在html代码中指定图像大小没有问题 守则: <style amp-custom&g

这是关于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>

.right40{浮点:右;最大宽度:40%}
amp img{最大宽度:100%}
我注意到,如果没有指定最小宽度,则不会显示图像。所以我增加了一个最小宽度100px,但是图像固定在100px

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

.right{最小宽度:100px;浮点:右侧;最大宽度:40%}
amp img{最大宽度:100%}

您是否有一个HTML页面,您可以给出一个示例,这样我们就可以在一个实例上查看代码?