For images that you know the width and height of, you can set the dimensions so that the image is not distorted:

img.widescreen {
	width: 16em;
	height: 9em;
}

For unknown image sizes, one side must be set to auto — this will force the correct aspect ratio upon the image, avoiding any skewness:

img.scale {
	height: auto;
	width: 75%;
}

Scaling images are great because you can prevent them from ruining your layout by going over an edge. If they are set in percentages and have limitations, it also means that they won’t go larger than the boundaries of the page and still remain undistorted, even when the browser is resized:

img.scale {
	height: auto;
	max-width: 100%;
	width: 30em;
}

Using the max-width/max-height property, you can also prevent everyday images from ruining your layout as well.