I added a resized image to my site - the blue Magic card in the bottom right. In Firefox, the image's proportions are ok. In Chrome however, the image is distorted. Why is that?
you've set height and width as 40% and 100% but these dimensions refer to available height and width (not percentages of the original image dimensions), and Safari (and Chrome) are resizing the image to 40% of the available viewport height (as there are no other height dimensioned parents) whereas firefox appears to be ignoring the percentages completely.
Note: When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.
set just the width to 100% and the height will adjust inline with the natural height in Safari - in Firefox it was ignoring the height and scaling based on width.