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:
- To calculate the aspect ratio of the image so that it is displayed correctly as it is resized.
- To calculate the page layout before anything is downloaded; this is required by AMP's static layout system.
Our example from the last chapter was a nice first attempt at a news article page, but there's a problem with it. It's not optimized for larger screens. When viewed on a larger screen, the main feature image becomes...