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?

2 answers

1
point

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.

Answered about 8 years ago by Tony Crockford
  • OK, so how do I scale according to the natural size? ripper234 about 8 years ago
  • try just setting just the width to 100%? Tony Crockford about 8 years ago
  • Yep, just tested it - 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. Tony Crockford about 8 years ago
0
points

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.

Answered about 8 years ago by Tony Crockford