にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

画像の縦横比を維持したままリサイズ(拡大/縮小)する方法 [イメージ]

ウェブページ上に画像を掲載する際、画像のオリジナルサイズではなく、拡大や縮小をさせて表示サイズ(面積)を変更して掲載したい場合があります。このとき、多くの場合では縦横比を維持したままリサイズしたいでしょう。デフォルトでは縦横比は維持されるので、たいていの場合はあまり何も気にしなくても縦横比を維持したまま拡大・縮小が可能ですが、HTMLやCSSの書き方によっては縦横比が維持されない場合もあります。

そこで、確実に画像の縦横比を維持したままリサイズ(拡大/縮小)する方法を解説してみます。
サンプルとして使う写真は例によって下記の川の写真です。

▼表示例に使う画像(原寸は横400px・縦180px)
写真

【目次】

そもそも、何も気にせずに記述しても縦横比が維持される場合

画像を表示するためのimg要素にサイズの情報を付加していない場合(=以下のようにHTMLソースを書いて画像を掲載しているなら)話は簡単です。

<p class="sample">
	<img src="summerriver.jpg" alt="写真">
</p>

この場合は、以下のようにCSSソースを記述するだけで、画像を望みのサイズで表示できます。

p.sample img {
	width: 200px;  /* 横幅を200pxに */
}

上記では、class名に「sample」が指定されたp要素に含まれるimg要素に対して、横幅200pxで表示する指定を加えています。これだけで、横幅が200pxになった上で、高さは縦横比を維持して自動調整されます。

▼原寸は「横400px・縦180px」だが、横幅(widthプロパティに「200px」が指定された結果、縦横比を維持して高さは「90px」になる。
写真

これだけなら話は簡単です。
しかし、問題はHTML側に(望みの表示サイズとは異なる)サイズが書かれている場合です。

HTML側にwidth属性やheight属性がある場合に、縦横比を維持してリサイズしたい場合

画像を表示するためのimg要素にサイズの情報を付加して、以下のように記述しているケースも多々あるでしょう。

<p class="sample">
	<img src="summerriver.jpg" width="400" height="180" alt="写真">
</p>

上記のHTMLソースでは、p要素の中にimg要素が1つ含まれているのは先の例と同じです。しかし、img要素内には「width="400" height="180"」のようにwidth属性とheight属性で画像サイズが指定してあります
この場合は、上記のHTMLだけで表示させると、画像は横幅400px・高さ180pxで表示されます。

このとき、CSSソースに(先程のように)widthプロパティだけしか指定しなかったら、縦横比が崩れてしまいます

/* ▼この指定だと縦横比が崩れる */
.sample img {
	width: 200px;
}

なぜなら、

  • 画像の横幅は、CSSのwidthプロパティで指定した値で上書きされるものの、
  • 画像の高さは(CSSでは指定されていないため)HTMLのheight属性の値がそのまま使われる

からです。表示例は以下の通りです。

▼HTMLで「横400px・縦180px」と指定してある状態で、CSSで横幅「200px」だけを指定すると、縦横比は崩れて「横200px・縦180px」で表示されてしまう。
写真

上記では、

  • 画像の横幅は、HTMLで指定された400pxではなく、CSSで指定した200pxになる
  • 画像の高さは、HTMLで指定された180pxのまま

のようになります。

であれば、「widthプロパティだけでなくheightプロパティも併記して、横幅と高さの両方を上書きしてやれば良いのではないか」と思われるかも知れません。それはその通りです。(^_^;) ただ、ここでも問題があります。heightプロパティが計算可能な場合は良いのですが、計算不可能な場合もあるからです。

▼widthに対して縦横比を維持するheightが計算可能な場合

widthプロパティの値をピクセル値で指定しているのであれば、heightプロパティの値も(縦横比を維持するように)自分で計算して指定することもできます。例えば以下のように。

.sample img {
	width: 200px;
	height: 90px;  /* ←縦横比を維持する高さを自力で計算して指定できる */
}

これなら(自力で縦横比を維持できる値を計算して指定したので当然ですが)横幅200px・高さ90pxで表示されるので、原寸の400×180と縦横比を維持した状態でリサイズできます。

しかし、このような計算ができない場合もあります。

▼widthに対して縦横比を維持するheightが計算不可能な場合

widthプロパティの値に50%や100%などの「親要素(ウインドウ幅など)に対する割合」を指定している場合には、高さを直接は計算できません。横幅が環境によって異なる以上、高さも同様に変わるからです。
例えば、画像を横に3つ並べるために「画像1つあたりの横幅を33%にしたい」というような場合でよく遭遇します。この場合、高さは事前には計算できませんから指定しようがありません。

そんなときに便利な値が「auto」です。
以下のようにCSSソースを記述します。

.sample img {
	width: 31%;    /* 横幅を割合で指定 */
	height: auto;  /* 高さは自動指定 */
}

このように、値にautoを指定すれば、縦横比を維持できるサイズが自動計算されて表示に使われます。

  • widthプロパティに数値を指定して、heightプロパティをautoにすると、横幅を指定サイズにした上で、縦横比を維持した高さが自動計算されます。
  • widthプロパティをautoにして、heightプロパティに数値を指定すると、高さを指定サイズにした上で、縦横比を維持した横幅が自動計算されます。
  • widthプロパティにもheightプロパティにもautoを指定すると、その画像の原寸サイズで表示されます。

▼HTMLで「横400px・縦180px」と指定してある状態で、CSSで横幅「31%」・高さ「auto」と指定すれば、縦横比は維持したままうまく拡大・縮小される。
写真 写真 写真

上記の表示例では、同じ画像を横に3つ並べています。HTMLソースにはwidth="400" height="180"と記述しているものの、CSSで横幅を「31%」に高さを「auto」にしているため、横幅を31%にした上で縦横比を維持できる高さが自動計算されて表示に使われます。その結果、縦横比を維持したまま自動拡大・縮小されることになります。

▼縦横比を維持する値が計算可能であってもautoを使っても良い

widthプロパティの値をピクセル値で指定していて、「縦横比を維持するheightプロパティの値」を自分で計算可能だったとしても、計算せずに「auto」を指定しておくことももちろん可能です。

.sample img {
	width: 200px;
	height: auto;  /* ←縦横比を維持する高さを自動計算 */
}

原寸が400×180で、横幅を200pxにしたなら、当然高さは90pxですが、上記ではheightプロパティに値「auto」を指定しています。このような指定も可能です。高さを自力で計算するよりも、

  • 計算ミスを防げる
  • 縦横比の異なる別画像に差し替えてもCSSを修正する必要がない

というような点で、むしろ積極的に「auto」を使う方が(数値を直接指定するよりも)望ましいでしょう。

以上、画像の縦横比を維持したままリサイズ(拡大/縮小)する方法でした。

まあ、最も望ましいのは、HTMLソース側にはサイズを記述しない(=img要素にwidth属性やheight属性を書かない)、ということだと思いますけどもね。(^_^;)

■関連記事:

《2016/04/13 11:07 初版公開》

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連書籍など

--- 当サイト内を検索 ---