Is it possible to make images responsive in AMP HTML or I need to declare the image size for each screen resolution in my media queries?

Question

Most images on my website occupy the whole screen width, so in my current website version (not AMP) I set all the images in my CSS to fill the whole screen width by doing this:

body img { 
  width:100%
}

Is there anything equivalent to this in AMP?

Solution

If you specify layout="responsive" as an attribute of the <amp-img> tag then the image will behave roughly like you've described. See an example at http://www.mirror.co.uk/news/uk-news/bonfire-night-2015-how-keep-6767214.amp

The <amp-img> tag requires a height & width. The height and width are used to make sure the space is held open for the image (because AMP images are lazy loaded) and the aspect ratio is respected when it is resized.

Comments

[WendiT]

The link you provided is dead.

[Cray]

Could you put an example in your answer and leave the link as a reference.