image-aspect-ratio

[scco]

as we discussed in

#301

about image crop - i enabled the UI to work with ALL image dimensions by wrapping images into a container what is set to a specific aspect ratio, that masks the image nicely into the desired format .

so we can bring images to any desired aspect ratio like this

<figure class="aspect-w-16 aspect-h-9">
   <img class="w-full h-full object-center object-cover" src="" />
</figure>

as the native css support for aspect-ratio is still not the best ( missing edge/IE ) i decided to go with a tailwind plugin
https://github.com/tailwindlabs/tailwindcss-aspect-ratio
that works niceley - via the old "padding-bottom-trick"

you need to rerun yarn install before you can see it working.

if you want to try out how this truly looks with other dimension images you can easy replace the image source of a card or detail page with a rectangle image via inspector of your browser src="http://placekitten.com/1000/1000" or just create a new grant :)