CSSで縦横比を維持したまま画像をリサイズする方法

ホームページ上で画像を表示する場合、
通常は表示する画像のサイズにあらかじめサイズを変更しておいて配置するのが望ましい。
HTMLやCSSでサイズを変えて画面上では小さく表示されていても、
実際には一度オリジナルの画像を読み込むことになるので読み込みの際のデータ量が大きくなり無駄が多い。
また、ブラウザ上でリサイズした場合はリサイズの質が悪い。
とはいえ、状況によっては大きな画像を画面上で小さくしたい場合もあるでしょう。
CSSを使った画像のリサイズ方法を紹介します。