Search code examples
htmlcssresponsive-designgridamp-html

How to contain a image responsively on an amp page?


As we need to define an image with amp-img tag for an amp page, the problem is with the responsive nature of those image. For example:

<p align="center"><amp-img width="400px" height="200px" layout="responsive" src="https://xyx.com/abc.png"></p>

Now if the master div is 600px then, the image will get stretched out to 600px (more than its normal 100%), but for a mobile device with master div being 300px , the image will adjust the height and will be perfectly fine as it will get contained in the 300px div stretching it to 100% won't make effect. Also, layout cannot be set to fixed because it will then stretch out of the mobile display. What's the solution?


Solution

  • If you have dynamic width of the image and want to handle this situation than go to this link : https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/ and read "Fixed-Height Layout with correct Aspect Ratios" section. It will help you to implement amp-img when you do not know the image width and do not want the image to be get stretched.