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?

amp-html
Bruno Barbosa picture Bruno Barbosa · Nov 23, 2015 · Viewed 9.2k times · Source

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?

Answer

MatCarey picture MatCarey · Nov 24, 2015

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.

Related questions

Best way to include custom JavaScript in AMP

I read all documentation about script tag but I cannot find how to include a custom JavaScript in AMP HTML. I know the <script> tag is prohibited unless its type is application/ld+json. There are default AMP …

Read More
Google AMP with React

We have an isomorphic react App with node. I want to convert some pages to AMP pages. I am confused! Shall we go for a separate AMP version of the app or shall we modify the current app according to …

Read More
Add Javascript in AMP Pages

Please help me understand how to add javascript in the AMP (Accelerated Mobile Pages). My requirement is I get an ID in URL. For example localhost:8080/home?id=1.I would like to access that id in my html file. or …

Read More