Product card image aspect ratio wrong

[thetomasv]

My meta tags provide the image url and image dimensions, but the image is still distorted. What’s interesting is that it looks fine in the validator, but in the actual tweet it’s not.
Validator says everything is fine.
I suspect it’s a CSS problem on Twitters side.

Is there a proper way of providing image information without cropping it on my side?

Tweet in question: https://twitter.com/GarySves/status/485023819334443008

[edvinasbartkus]

Same problem on our side. On web Twitter do not respect aspect ratio for product card.

[kamara]

We are seeing the same problem. Have you found any solution or heard any thing from twitter?

[andypiper]

Thanks for this feedback - I’ll ask the Cards team to take a look at this. Apologies for the issue you’re experiencing!

[jbulava]

Hi everyone! The resulting image for a product card will have a 1:1 aspect ratio (aka a square). Providing the dimensions of your image helps the card renderer figure out the best way to crop your image to fit this shape. This is the behavior I’m seeing in the example tweet provided. If the image is actually distorted or stretched rather than cropped, please let me know on what device and/or browser you are experiencing the problem.

[thetomasv]

We already worked around this by cropping the image to a square on our side.
The issue was present in web version of Twitter only. It seemed to be a CSS issue, as it went away when I tweaked max-width/max-height attributes in the inspector.
I’m not sure whether it still persists. It should be easy for you to check.

[jbulava]

I’m now seeing a few examples and have passed this along to the engineering team. Thanks @thetomasv!

[jbulava]

Engineering has pushed a fix for the cropping issue affecting the product card (tracked internally as PREL-11427). My tests that reproduced the problem are displaying correctly. Please let me know if anyone has any questions! I’ll be closing this topic soon if not.

[jbulava]