AMP图片宽高自适应 / Amp image width and height adaptation
<style amp-custom>
/*contain:增大或减小图像尺寸以填充框,同时保留其长宽比。*/
.plist-img img{object-fit: contain;}
</style>
<amp-img class="plist-img" layout="responsive" src="img/img01.jpg" width="100" height="50"></amp-img>
虽然AMP官方文档说将 fill 布局和css属性的 object-fit 结合使用,但是亲测了几个布局的使用好像都能用,都能保持原图比例!但是要注意的是图片的比例也是按照<amp-img width=“100” height=“50”>这里面而定的,也就是说在这个宽高为100*50的容器里面图片保持自己的宽高比而不至于变形。
可以参考的网站实例:https://css-tricks.com/almanac/properties/o/object-fit/