For example:
and
3개의 좋아요
They initially look OK and then convert to distort-o-vision. Paging @sam since this looks related to your image sizing CSS magicks 
Odd aspect ratio is reported as
–aspect-ratio:690/361
[1] pry(main)> FastImage.size('https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/0e/07/fa/0e07fa97-5135-288e-abec-8355648a07c1/source/1200x630bb.jpg')
=> [630, 630]
Looking at the HTML onebox generates:
<img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/4/3/43b940ab0b073922858cc50202a682bccb561534.jpg' width="695" height="364" class="thumbnail size-resolved onebox-avatar">
So somehow onebox here is adding nonsense sizes which throw us off later on.
@techAPJ can you look at app store onebox and fix onebox library to stop reporting sizes there.
4개의 좋아요
Probably worth looking at Google Play as well in case it inherits this defect from its family.
Also this looks wrong too
http://www.imdb.com/title/tt0105690/?ref_=nv_sr_1
So this may be busted a bunch of places and they all need fixin’
2개의 좋아요
The onebox is using the dimensions provided by the open graph tags
<meta content="1200" property="og:image:width" />
<meta content="630" property="og:image:height" />
Which are incorrect… 
3개의 좋아요
Generic Oneboxes will now no longer include open graph image size tags as per:
https://github.com/discourse/onebox/commit/913c91ef304661b3a11decb1148383cf30bb213c
IMDb issue seems related to the image processing we are doing in CookedPostProcessor.
4개의 좋아요
I’ll have a look at the IMDb onebox.
4개의 좋아요
Actually the IMDb issue is not related to the CookedPostProcessor but rather @sam’s magic aspect ratio code.
Seems like it’s not working as the padding-bottom of the ::before pseudo-element is indeed respecting the aspect ratio but not the max-height: 170px.
@sam do you think you can fix it via CSS? I can’t figure it out 
My only solution would be to cook the proper dimensions server-side.
2개의 좋아요
Well that was a nightmare:
This is fixed in latest due to this magic:
https://github.com/discourse/discourse/commit/2fe131db9f0cc2e8f53a2d3334019466cd845968
--magic-ratio: calc(var(--aspect-ratio) + 0.15);
width: calc(128px * var(--magic-ratio));
If an image is tall we go and take the widest possible onebox image we allow which is 128px and then multiply it by aspect + 0.15.
This works cause now we have 2 widths set, the max-width and the explicit one.
Very very complicated to come up with this hack, it works fine 
8개의 좋아요