Using responsive layout

Responsive design is built directly into AMP, and is one of the most useful layouts offered by the layout attribute. We saw how to use amp-img with the responsive layout in our news article example from the last chapter:

<amp-img  src="img/feature.jpg"    width="768"  height="305"  layout="responsive" ></amp-img>

Note that even though we are using the responsive layout, we still need to specify the width and height attributes. Shouldn't it just grow and shrink to fit the viewport? There are two reasons why the width and height attributes are needed:

  1. To calculate the aspect ratio of the image so that it is displayed correctly as it is resized.
  2. To calculate the page layout before anything is downloaded; this is required ...

Get AMP: Building Accelerated Mobile Pages now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.