In AMP HTML layout=responsive only keeps the aspect ratio I give to the image using the width and height attributes. Is there a way to keep aspect ratio of the image itself?
2
votes
2 Answers
8
votes
There is infact a work around, if you give the amp-img a container div ( personally i do this dynamically in backend )
Then apply a height to the container, then you can use the css amp-img > img { object-fit: contain; }
Heres a full example I use across 25,000 pages to keep my page images with a correct scale.
<div class="image"><amp-img width="400" height="225" layout="fill" src="foo.jpg"></amp-img></div>
Keep note the width/height doesnt matter as width and height sets itself 100% of container when using layout="fill".
0
votes
Nope. You can get the aspect ratio information from the back end or the image API you're using and put them as variables into the height and width attributes.
See following issues on github: https://github.com/ampproject/amphtml/issues/2039 https://github.com/ampproject/amphtml/issues/2939
