絶対はみ出さない画像！自動でサイズ調節するスタイルシート

今回も、ちぎり絵作家NARUさんの、作品「NARUシカ」をお借りして、スタイルシートで画面サイズに合わせて画像の大きさを自動で変え、スマホで見ても絶対にはみ出さない方法を説明します。

この記事はHTMLのimgタグの使い方が分かることを前提にしています。この記事を読んで分からない場合は、imgタグが分からない人向けに書いた、別の記事「画像が枠からはみ出さない、簡易的なスタイルシート」で対応してください。

画像の大きさを画面サイズに合わせて自動で変える

意味がわからない方は、試しに今開いているこのページのサイズを色々と変えてみてください。常に横幅いっぱいの大きさで、はみ出すことなく、フルサイズ「NARUシカ」が表示されていると思います。

自動で大きさを変える時はwidthをパーセントで指定する

このページの「NARUシカ」のソースコードは以下の通りです。

<img src="画像のURL" alt="画像の説明" style="width:100%;height:auto;" />

スタイルシートのwidthに100%を指定した結果、画面のサイズを変えても常にフルサイズになります。パーセンテージの基準は自分が入っている場所(node)の大きさです。基準の場所(node)の広さが1000ピクセルのところでwidth:100%を指定すれば、1000ピクセルの横幅で表示されます。

ですから、画像の親nodeが画面全体の50パーセントしかないところで、width:100%を指定しても、親nodeの幅いっぱいまでしか広がりません。

<div style="width:50%;"><!-- 親nodeの横幅が50% -->
<img src="画像のURL" alt="画像の説明" style="width:100%;height:auto;" />
</div>

上のソースの表示結果

高さの調節はheightでおこなう

さらに、heightをautoに指定することで、高さは横幅に合わせた自動調整となります。

縦横比が正しくないと、表示もおかしくなるので注意しましょう。

heightを指定して、横幅を自動調整することも出来ます。

サイズの違う２つのちぎり絵を高さ200ピクセルに合わせて表示

ソースコード

<p>
<img src="NARUシカのURL" alt="NARUシカ" style="width:auto;height:200px;" /> 
<img src="シータとパズーのURL" alt="シータとパズー" style="width:auto;height:200px;" /> 
</p>

シータとパズー

こちらも、ちぎり絵作家NARUさんの作品「シータとパズー」です。元々は小さな画像なのですが、フルサイズに拡大して表示しています。紙という素材を生かした、作品の繊細な表面がよくわかります。けど、曲がっています。拡大すると曲がっています。

この作品の元の横幅は、320ピクセルです。

元のサイズで表示

普段は自動でサイズを変更するが、表示画面が320ピクセル以上の場合は横幅320ピクセルで固定したい！という時はどうしましょ？

max-widthで最大幅を指定する

max-widthというのは、そんな時に使えるスタイルシートです。

<img src="URL" alt="説明" style="width:100%;height:auto;max-width:320px;" />

こうすると、横幅が320ピクセルまでは自動調整、ただし320ピクセル以上には広がらなくなります。320ピクセルだと小さいので、下はmax-width:500pxで設定しています。ブラウザのサイズを変えても500ピクセル以上には広がらないのがわかると思います。

また、それ以上小さくなって欲しくない時にはmin-widthというものもあります。min-widthを指定すると、その値よりは小さくならなくなります。

max-width min-width と同じ事を高さに適用させる、 max-height min-height というのもありますが、使い方は同じです。

画像のサイズ変更はアフィリエイトでも出来ますが、規約をよく読んだ上、自己責任で行なって下さい。トラブルが起きても当サイトは関知しません。

上の画像は下のようなソースで表示しています。

<style type="text/css">
p.dolls img{
 float:left;
 width:19%;
 margin-right:1%;
}
</style>

<p class="dolls">
<img src="画像1のURL" alt="画像1の説明" />
<img src="画像2のURL" alt="画像2の説明" />
<img src="画像3のURL" alt="画像3の説明" />
<img src="画像4のURL" alt="画像4の説明" />
<img src="画像5のURL" alt="画像5の説明" />
</p>