Is it possible to have an in-line styling in the amp-img?

Question

I have an image to be rendered using amp html and I want to use inline styling. I tried the following:

<div style=" position: relative;width:240px; height:120px;">
  <amp-img layout="fill"style="object-fit: cover;" alt="" src="https://hips.hearstapps.com/ghk.h-cdn.co/assets/17/30/2560x1280/landscape-1500925839-golden-retriever-puppy.jpg?resize=480:*"> </amp-img>
</div>

but the inline styling of amp-img is not working.Can someone tell why and give a solution to this problem?

Answer 1

Yes inline styles are allowed in AMP. For your example above i tested, styles you applied for wrapped div element are working. For styles you applied over amp-img element as 'object-fit: cover' will not work here as you using layout="fill". In fill layout img will take size of it's wrapped element.

To use amp-img it's better to have images of fixed ratio (e.g. 16x9) then you can use layout responsive as layout="responsive" width="16" height="9".