The power with scal­ing images is immense but very few people use it on a web­site. Scal­able images are set in either ems or percentages.

For images that you know the width and height of, you can set the dimen­sions 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 cor­rect aspect ratio upon the image, avoid­ing any skewness:

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

Scal­ing images are great because you can pre­vent them from ruin­ing your lay­out by going over an edge. If they are set in per­cent­ages and have lim­it­a­tions, it also means that they won’t go lar­ger than the bound­ar­ies of the page and still remain undis­tor­ted, even when the browser is resized:

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

Using the max-width/max-height prop­erty, you can also pre­vent every­day images from ruin­ing your lay­out as well.