Wide images get distorted
benebun opened this issue · comments
Images like logos that are wider than 2.56:1 aspect ratio get distorted because of themin-height: 100px of the invalid-image-fallback mixin: https://github.com/springload/draftail/blob/master/examples/blocks/MediaBlock.scss#L31
Would you consider making the fallback height smaller, e.g. 50px? Then only even extremer images would be distorted.
Examples:
With the current settings a logo with 4.23:1 aspect ratio gets squashed horizontally:
With min-height: 50px it's ok:
Fallback now:
Fallback with min-height: 50px:
Additionally I changed the background color from #333 to #eee to make images with a transparent background more appealing.
Hey @benebun, thanks for taking the time to report this! That fallback really isn't meant to interfere with images that work, so yep, I think we should reduce it as you suggest. Potentially cut the min-width by half as well, so the fallback’s aspect ratio stays the same.
For the color, this also seems like a worthy improvement.
The code you linked to is just for the Draftail demo site though – are you using Draftail directly and copied this code into your project, or are you using it through Wagtail? For Wagtail, the code to update would be https://github.com/wagtail/wagtail/blob/87bbc31d88ca747584a47836985ec20677a2de82/client/src/components/Draftail/blocks/MediaBlock.scss#L30-L34.
The code link was just to illustrate where it happens but we are using it via Wagtail yes.
👌 if you're keen to make a PR to Wagtail with that fix is very welcome. Otherwise, it would also be useful to have this same issue open on the Wagtail issue tracker so more people are aware of it.
Hey @benebun, just pinging you in case you haven't seen my previous comment. We're going to make a new release of Wagtail some time over the next couple of weeks, if you have a chance to attempt a PR before then, it could make it into the next release.