Fluid image でスクリーンサイズに合わせて画像サイズを変える

スマートフォンサイトやレスポンシブWebデザインでは、スクリーンサイズに合わせて画像の大きさを伸縮させなければなりません。そのようなときは Fluid image の手法を使い、コンテンツの比率を維持したまま画像サイズを表示環境に合わせます。

widthプロパティにサイズを%指定する

まずは200 X 160pxの画像「sammple.png」を用意し、HTMLを以下のように記述します。

HTMLでは、img要素にwidth属性とheight属性を指定しません。

CSSは以下のように記述します。画像をWindowサイズの50%幅で描画しています。

ブラウザでの表示は以下のようになります。

通常のウィンドウサイズでの表示

ここでウィンドウサイズを少し広げてみましょう。
ウィンドウサイズに合わせて、縦横比を維持しながら画像の幅がオリジナルサイズの200pxより大きくなっています。

広げたウィンドウサイズでの表示

反対にウィンドウサイズを狭めると、画像の幅もそれに合わせて小さくなります。

max-widthプロパティにサイズを%指定する

先ほどはwidthプロパティにサイズを指定し Fluid image にしましたが、max-widthプロパティを使うこともできます。

CSSは以下のように記述します。

このとき、ウィンドウサイズを広げたときの表示は以下のようになります。

max-widthプロパティによる広げたウィンドウサイズでの表示

ウィンドウサイズを狭めたときは、widthプロパティと同じように画像の幅もそれに合わせて小さくなります。しかしウィンドウサイズを広げたときは、オリジナルサイズの200pxよりも画像の幅は大きくなりません。ここがwidthプロパティとmax-widthプロパティの違いです。
したがって、max-widthプロパティで指定するときは、最大のウィンドウサイズに合わせた画像を用意することが必要です。

スポンサーリンク

特集記事

  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ