画像の縦横比を維持したままリサイズ(拡大/縮小)したい

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

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

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

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

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

上記では画像ファイル「riverchildren.jpg」を表示させていますが、縦横のサイズは記述していません。
この場合は、以下のようにCSSソースを記述するだけで、画像を望みのサイズで表示できます。

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

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

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

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

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

<p class="sample">
	<img src="riverchildren.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ではなく、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を指定すると、その画像の原寸サイズで表示されます。

上記の表示例では、同じ画像を横に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属性を書かない)、ということだと思いますけどもね。(^_^;)

(更新日：2019年09月16日)