AMP图片宽高自适应 / Amp image width and height adaptation

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/