サイズの違う画像を幅か高さで揃えて並べるCSS

CMSでホームページを更新すると、最初にデザインを考えた時とは違うサイズや形の画像をアップロードする事や、縦長の画像と横長の画像が混在している事があります。

このような場合に、表示サイズを「高さ」または「幅」で揃えるためのCSSを紹介します。

この方法の使いどころ

高さを揃えるのが適したケース

例えば、複数の画像を横に並べる時に全て高さを揃えると、形が違うものがあってもきれいに表示できます。

幅を揃えるのが適したケース

一方、画像を縦方向に並べる場合は、画像の幅を揃えるときれいに表示できます。

類似の方法

このサポートページではサイズや形(縦長、横長)の違う画像の縦横比は変更せずに(=縦長画像は縦長に、横長画像は横長に)表示する方法をご紹介します。

画像の形に関わらず同じスペースに表示したい(例:常に正方形で表示したい)場合は、下記ページをご覧下さい。
縦横比の違う画像を同じサイズに揃える方法

「すぐ使えるCMS」への応用

このページでは CSS の設定の考え方だけをご紹介します。「すぐ使えるCMS」のテンプレートに設定する場合は、生成されたページが同様の表示になるように調整して下さい。

画像の高さを揃えて並べる方法

考え方

画像の高さを揃えるには、画像(<img>)を別のタグで囲い、「display: inline-block;」を指定した上で高さだけを指定するのがポイントです。幅は画像をゆがめないようにブラウザが自動計算して表示してくれます。

HTML

コピー
<a class="thumbnail" href="image1.jpg" target="_blank"><img src="s_image1.jpg" alt=""></a>
<a class="thumbnail" href="image2.jpg" target="_blank"><img src="s_image2.jpg" alt=""></a>
<a class="thumbnail" href="image3.jpg" target="_blank"><img src="s_image3.jpg" alt=""></a>
<a class="thumbnail" href="image4.jpg" target="_blank"><img src="s_image4.jpg" alt=""></a>
 :

上記コードでは、「サムネイルから拡大画像にリンクする」という想定で画像を <a> タグで囲っています。このような必要が無ければ <a> の代わりに <div> で囲って下さい。

CSS

CSSでは、囲ったブロックに「display: inline-block」を指定し、その高さだけを指定するのがポイントです(青字部分)。画像はそのブロック内で高さが100%を指定します。

複数の画像を並べる場合、画像は左から右へ、上の行から下の行へと詰めて表示されますので、画像を囲ったブロックの右と下にマージンを取ります(赤字部分)。

コピー
.thumbnail {
    display: inline-block; /* ここがポイント */
    height: 80px;
    margin-right: 15px;
    margin-bottom: 15px;
}
.thumbnail img {
    height: 100%;
}

両端揃えができない制限

画像が多く2段以上になった場合、1段目に収まりきらなかった画像は2段目に送られますが、マージンも含めて1段に収まるかが計算されるため、領域の左端から右端まできっちりと画像を詰め込む事はできません。

画像の幅を揃えて並べる方法

考え方

画像の幅を揃えて表示する場合は、幅を指定した領域を設定し、<img> を幅100% で配置します。高さは画像をゆがめないようにブラウザが自動計算して表示してくれます。

HTML

コピー
<div style="image_col">
    <a class="thumbnail" href="image1.jpg" target="_blank"><img src="s_image1.jpg" alt=""></a>
    <a class="thumbnail" href="image2.jpg" target="_blank"><img src="s_image2.jpg" alt=""></a>
    <a class="thumbnail" href="image3.jpg" target="_blank"><img src="s_image3.jpg" alt=""></a>
    <a class="thumbnail" href="image4.jpg" target="_blank"><img src="s_image4.jpg" alt=""></a>
     :
</div>

上記コードでは、「サムネイルから拡大画像にリンクする」という想定で画像を <a> タグで囲っています。このような必要が無ければ直接 <img> を配置しても構いません。

CSS

CSSは、外側のボックスに幅を指定し(青字部分)、その中の画像に幅100%を指定するのがポイントです。

複数の画像を並べる場合、上から下へ詰めて表示されますので、画像の下にマージンを取ります。このマージンは画像に直接しても良いですが、この例では画像が <a> タグで囲ってありますので、この <a> の方にマージンを指定しています(赤字部分)。

コピー
.image_col {
    width: 25%;
}
.thumbnail {
    width: 100%;
    margin-bottom: 15px;
}
.thumbnail img {
    width: 100%;
}

関連記事

縦横比の違う画像を同じサイズに揃える方法

応用マニュアル ホームページ画面
縦横比(アスペクト比)やサイズの違う画像を、指定サイズに収めて表示する方法。CSS と JavaScript を組み合わせて調整します。jQuery を使います。
レスポンシブWebデザインのライトボックス(lightbox)の組み込みサンプル。PC/スマホ両方で、画面のサイズに画像が拡大されます。画像のグループ化や、インラインフレーム(iframe)からの画像拡大のJavaScriptサンプルコード。

関連コンテンツ