Search code examples
amp-html

Mimic background-size:cover with amp-img tags


I have images of various sizes (with different width/height ratios as this is user-generated content) and I try to show them in a nice square tile, without stretching them.

In normal HTML, I use divs with the image set as background-image and a background-size:cover property.

Is it possible to achieve this with amp-img tags? Not sure which layout I could use to achieve this.

Thank you


Solution

  • Why not use the same CSS based approach in your AMPs? CSS background images are fully supported by AMP.