このページはRedlineMagazine::文字サイズに画像サイズを合わせるのサンプルページです。

女の子の写真ですよー

背景画像のサイズをemで指定。(背景画像っつーかそのボックスのサイズ)
pタグに中身を入れてはみたけど、text-indentでテキストを外に出したらCSS有効で画像がOFFの時はまったく意味ないな･･･と。
Firefoxでctrl＋マウスグリグリして最小サイズにしたら鼻の穴しか見えないというのはスルーの方向で。あくまで文字サイズを読める範囲で変更したらどうなるかという前提。

<p class="resize_image01">女の子の写真ですよー</p>

.resize_image01{
	float: left;
	width:10em;
	height:10em;
	background:url(xxx.jpg) no-repeat center center;
  	border: 3px double #ccc;
	text-indent:-9999px;
	margin:0 0.3em 0.3em 0;
	}

imgタグで置いた画像のサイズをemで指定。
コレは画質が文字サイズによってマチマチになる。

<p><img src="xxx.jpg" alt="女の子の写真ですよー" class="resize_image02" /></p>


.resize_image02{
	float: left;
	width:10em;
	height:10em;
	border: 3px double #ccc;
	margin:0 0.3em 0.3em 0;
	}

まずimgタグの親(ここではpタグ)にoverflow:hidden;を指定。
でimgタグで置いた画像のはみ出す部分はカットされるわけだけど、表示しておきたい部分をネガティブマージンで適当に位置にセット。(ちょっと日本語おかしいかも)
でもパターン１と違って常に画像を縦も高さもセンターに合うわけではないので文字サイズをいろいろ変えていくと位置がズレてくる。ということで元画像の書き出し、位置あわせの指定に注意が必要になってくる。

<p class="resize_image03"><img src="xxx.jpg" alt="女の子の写真ですよー" /></p>

.resize_image03{
	float: left;
	width:10em;
	height:10em;
  	border: 3px double #ccc;
	margin:0 0.3em 0.3em 0;
  	overflow: hidden;
	}
.resize_image03 img {
  margin:-75px 0 0 -75px;
	}