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

Create Resizable Images With CSS | Smiley Cat Web Design

文字のサイズを変更した際に画像のサイズも変化させるＣＳＳテクニック

やり方１

<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;
}

やり方２

<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;
}