画面の横幅に合わせて画像サイズを変更する方法
レスポンシブウェブデザインを採用しているブログやサイトにおいて、画像を各端末に合わせて、サイズを変更させには、cssの記述だけで実現できる。p.resize img { width: 100%; }
cssファイルに記述を追加し、html内の画像をpタグのクラスをresizeとすれば、画面サイズに合わせて、画像のサイズが変更される。
pタグは、cssにより変更していなければ、画面の端から端まで拡がる特性がある。この特性を利用しただけの簡素な方法で、問題は解決できる。
widthを50%にすれば画面の半分の幅で表示される画像にも対応可能ではある。
<p class="resize"><img src="画像.gif" alt="○○" /></p>
この方法は、ヘッダーによく使う画面の横幅に画面全体、余白なしで拡がっている画像には使える。もともと横幅に余白がある状態の画像では、この方法では、画像が大きくなりすぎるため使えない。
画像のサイズに最大幅と最小幅を設定しておくと、それ以上、以下でのサイズの拡がりはない。
p.resize { max-width: 900px;min-width: 300px;}
p.resize img { width: 100%; }
CSS3で追加されたMedia Queries
img.small { display: none; }
@media screen and (min-width: 400px) {
img.small { display: none; }
img.big { display: block; }
}
@media screen and (max-width: 399px) {
img.small { display: block; }
img.big { display: none; }
}
display:noneで画像を表示しないを宣言する。
400px以上の時には、display:blockで大きい画像を表示する。
400px以下の時には、display:noneで大きい画像を表示しないようにするcssの意。
@media screen の効果を発揮するには、htmlの<head>～</head>にメタタグの記述を加えなければならない。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewportの設定は、多様な記述があるが、もっとも一般的な記述を掲載している。
htmlの記述は、単純に2つの画像を並べるだけと、簡素だ。画面サイズに合わせ、自動で2つの画像を入れ替えてくれる。
<p class="resize"> <img src="小さい画像.gif" alt="○○" class="small"> <img src="大きい画像.gif" alt="○○" class="big"> </p>
HTML5で新しく追加された、srcset属性を使い、あらかじめ用意した小さいサイズの画像と、大きいサイズの画像を切り替えるhtmlの記述。
<img src="通常の画像.gif" srcset="image_小さいサイズの画像.gif 300w,
image_大きいサイズの画像.gif 640w" >
srcset属性に未対応のブラウザなら、通常の画像を表示。300px以下なら、小さいサイズの画像、640px以下なら大きいサイズの画像を表示するの意。
まだ過渡の新規格のため、未対応のブラウザも多く、動作は非常に不安定だ。実装、取り扱いには注意してほしい。
画像をレスポンシブに対応させることは、可能ではあるが、全てのブラウザ、端末で表示確認ができないため、一抹の不安が残る。
出来れば、画像サイズは、あらかじめスマートフォンのサイズに適応できるように、小さくする方法が一番スマートかつ簡素にまとまる。
