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プロパティで指定するときは、最大のウィンドウサイズに合わせた画像を用意することが必要です。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

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

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ