In class, we were discussing the displaying of images with the <img> tag, and I talked about not changing the aspect ratio.  I want to make sure the concept is clear.

The aspect ratio is simply the ratio between the width and height of an image. Here is an image with a 1:1 aspect ratio — that means that the width and height are the same.  (Sorry, you have to look at my face for these examples!)

 

This picture is 150 x 150 pixels.  If I display it at 75 x 75 pixels, the aspect ratio is still 1:1, so it still looks okay:

But if I display the image at 150 x 75 pixels, I’ve changed the aspect ratio — it’s now 2:1 — and it doesn’t look right:

Similarly, at 75 x 150 pixels, I’ve again changed the aspect ratio — it’s now 1:2 — and it still doesn’t look right:

Now admittedly these are extreme examples to show you the effect.  But even a small change to the aspect ratio distorts an image.  It’s usually noticeable, and it makes for a very unprofessional-looking web page.  If you’ve been paying attention in class, you know that there are certain practices I consider to be almost evil, and this is one of them.  If you need to change the proportions of an image to better fit your content, use image editing software to crop the image to the desired proportions, instead of stretching or scrunching it, so that it will fit the space without distortion.