The image of the card on my site (bottom right) displays differently in Chrome and Firefox. In Chrome, its ratio is preserved, but the ratio is twisted in Firefox.
How can I apply a constant resize of the image itself, cross-browsers (basically do what now happens for Chrome)
You've got the following in your image tag:
width="100%" height="40%"
Try specifying just one of those (I would suggest the width) to maintain the aspect ratio, otherwise the image will be stretched or squished one way or another to fit those dimensions on the less thoughtful browsers.
Ideally you want to avoid allowing the browser to resize the image. Different browsers achieve varying levels of quality which never compare to what you can achieve with a dedicated digital image editor (Photoshop, Paint.NET, etc). Best to resize it to the desired dimensions before publishing then explicitly set the actual height and width in pixels.