I'm a big fan of layouts that still work if a user increases their browser's text size.

テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック



方法１
次のDIVがあったとして、

<div class="resize"></div>

次のＣＳＳを適用します。

.resize {
    background: url(image.jpg) -130px -140px no-repeat;
    border: 3px double #fff;
    float: left;
    height: 12em;
    margin: .2em 1em 1em 0;
    width: 12em;
}

すると、文字サイズを変更するに応じて画像サイズも変更されます。

方法２
もう一つ方法があって、次のようにHTMLを定義します。

<div class="resize2"><img src="image.jpg" alt="" /></div>

そして、次のＣＳＳを適用します。

.resize2 {
    border: 3px double #333;
    float: left;
    height: 12em;
    margin: .2em 1em 1em 0;
    overflow: hidden;
    width: 12em;
}

.resize2 img {
    margin: -220px 0 0 -210px;
    padding: 6em 0 0 6em;
}

方法１は、<img>タグがないのでちょっと気持ち悪いですが、シンプルに実装できますね。
方法２は、<img>タグがありますが、CSSが少々大きくなります。

通常、文字サイズを変更しても、画像のサイズは大きくはならないので、
ユーザビリティ向上のために覚えておいて損はないテクニックですね。