REDLINE MAGAZINE | CSSで文字サイズに画像サイズを合わせる

CSSで文字サイズに画像サイズを合わせる

テキストサイズの可変に伴いCSSで画像サイズを変更する方法を３つ。
まずサンプル。

>>文字サイズに画像サイズを合わせるのサンプル

説明･･･はサンプルページを見れば何がしたいのか分かるような気もするけど一応書いてみる。どのパターンも単純に大きめのサイズに書き出した画像を用意してどう表示させるかcssで指定してるだけ。

パターン１の場合

パターン１はcss側で表示したい画像を背景画像として指定。幅や高さはemで指定することによって文字サイズの可変に合わせてでっかくなったりちいさくなったり。元画像を縮小拡大しているわけではなく、見える範囲が大きく小さくなるだけなので画質が汚くなるってこともない。

<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タグで画像を置いてもパターン１みたいな感じでなんとかならないかなーという作戦。ポイントはoverflowとネガティブマージン。サイズ変更する画像が数枚ならパターン１いいけど、多数にわたって変更したい場合はいちいちcssソースの背景画像を追加するのはめんどいのでこっちの方が楽かもしれない。

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

ていうか･･･

ブラウザの「ズーム」で拡大すればこんなの全然意味ないんじゃ･･･。

2007年05月23日 06:32 | Red | パーマリンク