Fluid Image

Fluid Imageとは、ウィンドウサイズに合わせて画像サイズも可変させる手法です。

いわゆるFluid Grid System(可変グリッドシステム)のようなリキッドレイアウトでよく用いられます。

基本的にCSSのみで実装できますが、IE 7以下では縮小された画像が粗く見えるため、imgSizer.jsというスクリプトを組み込みます。

DEMO

ここをクリックすると、デモページに移動します。

CSSの実装方法

まずページ全体をリキッドレイアウトにし、すべてのwidthプロパティの値を%で指定します。

例えば固定幅が940pxのレイアウトをリキッドにする場合、以下のように記述します。

HTML

<div id="container">
	<div class="left-column">
	<p>Fluid Imageとは、ウィンドウサイズに合わせて画像サイズも可変させる手法です。</p>
	<p>いわゆるFluid Grid System(可変グリッドシステム)のようなリキッドレイアウトでよく用いられます。</p>
	<p>基本的にCSSのみで実装できますが、IE 7以下では縮小された画像が粗く見えるため、imgSizer.jsというスクリプトを組み込みます。</p>
	</div>
	<p class="right-column"><img src="images/photo.jpg" class=" fluid-image" alt ="イメージ画像" /></p>
	</div>

CSS

 #container {
	width: 94%;
	margin: 0 auto;
	padding: 5%;
	}
	.left-column {
	float: left;
	width: 45%;
	}
	.right-column {
	float: right;
	width: 45%;
	}

img要素には「max-width: 100%;」を指定します。

 /* Firefox, Safari, Chrome, Opera fluid Image */
	img.fluid-image {
	max-width: 100%;
	}

IE用には条件分岐コメントで指定します。

    <!--[if lte IE 7.0]>
	<script type="text/javascript" src="imgSizer.js"></script>
	/* IE fluid Image */
	<style type="text/css">
	img.fluid-image {
	width: 100%;
	}
	</style>
	<![endif]-->

IE 7以下用に「imgSizer.js」を組み込む

IE 7以下では縮小された画像が粗く見えるため、imgSizer.jsというスクリプトを組み込みます。

  • 「imgSizer.js」無し
  • 「imgSizer.js」有り
  1. UNSTOPPABLE ROBOT NINJAというサイトから、「Here’s the script in full:」以下をコピーし、「imgSizer.js」ファイルに保存します。
    ここから直接スクリプトにリンクしています。)
  2. 1 x1 ピクセルの透明GIF画像を作成し、保存しておきます。
  3. 「imgSizer.js」を開き、上から4行目の「,spacer : "/path/to/your/spacer.gif"」を、透明GIF画像のパスに書き換えます。
    パスはHTMLからの相対パスです。
  4. HTMLが読み込まれたら処理を呼び出すため、「imgSizer.js」の末尾に以下を記述します。
    addLoadEvent(function(){
    	imgSizer.collate();
    	});
    	
    // Executing JavaScript on page load <http://simonwillison.net/2004/May/26/addLoadEvent/> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } }
    →変更後の「imgSizer.js
  5. HTMのhead要素内に、「imgSizer.js」を読み込む記述をします。(IE 7以下のみに読み込ませたいので、上記の条件分岐コメントの中に記述します)
        <!--[if lte IE 7.0]>
    	<script type="text/javascript" src="imgSizer.js"></script>
    	/* IE fluid Image */
    	<style type="text/css">
    	img.fluid-image {
    	width: 100%;
    	}
    	</style>
    	<![endif]-->
    

ページトップに戻る