縦横比の違う画像を同じサイズで揃えて並べる方法

CMS（ホームページ更新ツール）を使ってホームページの更新を行う場合、デザインした時に想定していたのとは違うサイズの画像をアップロードする場合があります。この時、縦横比（アスペクト比、画像の形、縦長/横長 などが違うもの）が異なる画像がアップロードされると大きくデザインが崩れてしまったり、画像がゆがんでしまったりと、思いの他調整が難しいものです。

このサポートページでは、縦横比の異なる画像の表示サイズをホームページ上で揃えて表示（トリミング、切り抜き、周辺をカット）する方法を紹介します。CSS（スタイルシート）と JavaScript を組み合わせて使います。実際の画像サイズは変更しません。

縦横比の調整（トリミング、切り抜き、クロップ）の目的

縦横比の調整の目的は、例えば以下の用途が挙げられます。

  • 4:3 と 16:9 など、縦横比（アスペクト比）の異なる画像を同じサイズで表示する
  • 縦型（ポートレート）も横型（ランドスケープ）も同じサイズの表示エリアに収める
  • サムネイルはいつも正方形で表示する

画像の表示サイズ調整の仕掛け

このページでは、(1) 基本的な仕掛けの設定方法を説明した後、(2) 具体的にサイズ設定方法を説明します。

基本的な仕掛けに必要な設定は、JavaScript と CSS の2か所あります。

JavaScript の設定

画像のサイズ調整をしたいページに JavaScript を追加します。

JavaScript 追加対象ページ

導入先のページによって、編集対象ファイルが違います。調整したいページによって、編集対象ファイルを選んで下さい。

対象ページ 編集するテンプレートファイル
（templates/article 内）
記事ページ webdir/1.html、2.html、... article.html
全一覧（目次） webdir/index.html article_list.html
短い一覧（新着情報） webdir/index_short.html short_list.html

追加するJavaScript

</body> （終了タグ）の直前に以下の JavaScript を追加して下さい。

  • 緑字の部分は、ページ内のどこかで既に jQuery 1.x が読み込まれていれば追加不要です。
  • 青字の部分は外部ファイルに定義して読み込んでも構いません。
  • 赤字の部分は、画像が無い場合に表示する代替画像を指定して下さい。もし「No Image」などの画像表示が不要なら、この行を削除して下さい。
コピー 
<script src="//lcns2.sugutsukaeru.jp/c803d429b782f84/4.9/a4b94adbcbff24406a11ec647abba536/js/jquery-1_11_3-min.js" type="text/javascript"></script>
<script type="text/javascript">
function size_adjust(myImg, thumbW){
    if (myImg.prop("complete") && myImg.prop("naturalWidth")){
        /* サイズ調整 */
        var heightOrg = myImg.height();
        if (thumbW > 0 && thumbW > myImg.width()){
            var NewHeight = Math.ceil(myImg.height()*thumbW/myImg.width());
            myImg.css("height", NewHeight+"px");
            myImg.css("width", thumbW+"px");
        }
        /* 位置調整 */
        if(myImg.height()>=myImg.width()){ //portrait
            var myOffsetHeight=(myImg.height()-heightOrg)/2;
            if (myOffsetHeight>1){
            myImg.css("top", "-"+Math.floor(myOffsetHeight)+"px");
            }
        } else if (myImg.height()<myImg.width()){ //landscape
            var myOffsetWdith=(myImg.width()-thumbW)/2;
            myImg.css("left", "-"+Math.floor(myOffsetWdith)+"px");
        }
        myImg.css("visibility", "visible")
            .animate({opacity: 1}, 1000)
            ;
    } else {
        setTimeout(function(){
            size_adjust(myImg, thumbW);
        }, 400);
    }
}
$(document).ready(function(){
    /* 画像のサイズ調整 */
    $('.size-adjust').each(function(){
        if (0 < $("img", this).length){ 
             size_adjust($("img", this), $(this).width());
        } else {
            $(this).css("background-image", "url(./parts/img/noimage.png)");
        }
    });
});
</script>

「No Image」画像について

メイン画像など大きく表示する場所に画像が無かった場合に、代替として表示する画像を指定できます。

適当な画像を作成してサーバにアップロードの上、指定して下さい。画像が無い場合は「No Image」と表示されます。

画像が無い運用があり得ないような場合はこの部分の設定は不要です。また、画像が無かったら関連のタグ全体が削除される場合も設定不要です。

CSSの設定

次に、サイズ調整のために共通に必要になる CSS を設定します。

CSS 追加のための編集対象ファイル

CSSの追加場所は任意です。既にテンプレートで読み込んでいるCSSファイルがあれば、そのファイルに後述の設定を追加して下さい。

もし外部CSSファイルが無ければ新たに作って読み込むか、対象ページの <head> と </head>の間に追加して下さい。既存のスタイルタグ（<style type="text/css"> - </style>）が無ければそれも追加して下さい。調整対象ページと編集すべきテンプレートファイルの対応は、JavaScript の場合と同じです。

追加するCSS

下記の設定をこのまま追加して下さい。

コピー 
/* 画像サイズ調整のための仕掛け */
.size-adjust img {
    position: absolute;
    left: 0;
    top: 0;
    border: none;
    height: 100%;
    visibility: hidden;
    opacity: 0;
}

画像のサイズ調整

ここまでで、サイズ調整のための仕掛け整いました。この後はそれぞれの画像に希望のサイズを設定します。

まずは設定の要点と、設定例を2つご紹介します。

設定の要点

設定の要点は、縦横のサイズを決めたボックスに画像タグを収め、そのボックスにクラス「size-adjust」を設定する事です。言い換えると、サイズ調整したい画像をもう一つ別のタグで囲って、そこにCSSで表示したい幅（width）と高さ（height）を設定します。

画像サイズ調整のためのHTMLタグ付の要点

「ボックス」は <div> でなくても構いません。全てのブロック要素の他、display: inline-block を指定した <a> や <span> でも結構です。

コピー 
<div class="size-adjust"><!-- このボックスの幅と高さはCSSで指定しておく -->
    <img src="(画像の指定)"><!-- この画像のサイズを調整したい -->
</div>

設定例1: 新着情報画像

短い一覧（新着情報）の画像にサイズ設定するために、テンプレートファイル templates/article/short_list.txt を編集する場合の例です。画像を <a> タグで囲って、その <a> タグに（CSSクラスを指定する事で）幅と高さが設定してあります。

【注意点】製品やバージョンによっては、指定できるテンプレート変数が異なります。お手元の製品に編集を加えている場合はポイント部分のみ編集して下さい。

HTML

この例では、<a> タグが「ボックス」の役割になっています（CSSで display: inline-block を指定）。

囲ったタグにはクラス「size-adjust」を指定して下さい（青字部分）。このクラスをマーカーにして JavaScript がサイズ調整を行います。

コピー 
<a class="main-thumbnail size-adjust" href="%_to_article_%">
<img src="%_d_%/%_thumbnail_escaped_1_%" alt="%_imagetext_1_%">
</a>

CSS

「size-adjust」は調整用の JavaScript で使うクラスなので、このクラスには直接スタイル指定は行わず、別のクラス「main-thumbnail」を設定した上でCSS規則を定義しています。

赤字は希望の表示サイズを設定して下さい。青字は表示のための必須設定です。

緑字は、画像が無い場合に「No Image」などの代替画像を表示する時のための準備です。このような画像が必要無ければ削除して下さい。

コピー 
.main-thumbnail {
    position: relative;
    width: 100px; /* 画像の幅 */
    height: 100px; /* 画像の高さ */
    display: inline-block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #999;
    overflow: hidden;
}
CSS設定の注意点

CSS規則設定の際は、下記の注意点を守って下さい。

  • 「position: relative」を指定
  • 幅と高さの両方を指定
  • 囲ったタグがブロック要素でなかった場合（＝ <a> や <span> だった場合）、「display: inline-block」を指定
  • padding を指定しない（margin は可）
  • 「overflow: hidden」を指定

設定例2: 詳細ページ画像

次の例は、詳細ページの画像にサイズ設定するために、テンプレートファイル  templates/article/article.html と templates/article/article_image_#.txt （「#」は数字）を編集する場合を取り上げています。今度も画像は <a> タグで囲ってありますが、サイズを指定のためにはさらにその上に <div> を作っています。

【注意点】製品やバージョンによっては、指定できるテンプレート変数が異なります。お手元の製品に編集を加えている場合はポイント部分のみ編集して下さい。

HTML: templates/article/article.html

詳細ページの画像の場合、外側のタグ（<div class="mainimage size-adjust">）を article.html に記載し、中の画像のリンクを別ファイル templates/article/article_image_#.txt （「#」は数字）に記載するのがポイントです。そうする事により、画像がアップロードされなかった時にも、この <div> が背景色または「No Image」画像の表示場所として残ります。

コピー 
<div class="mainimage size-adjust">
    %_article_image_#_%
</div>

HTML: templates/article/article_image_#.txt

コピー 
<a href="%_d_%/%_filename_escaped_%" target="_blank" title="拡大:%_imagetext_%">
<img src="%_d_%/%_thumbnail_escaped_%" alt="%_imagetext_%"></a>

CSS

赤字は希望の表示サイズを設定して下さい。青字は表示のための必須設定です。注意点は設定例1と同じです。

コピー 
.mainimage {
    position: relative;
    width: 240px; /* 画像の幅 */
    height: 180px; /* 画像の高さ */
    margin: 0 0 9px 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #999;
    overflow: hidden;
}

画像タグ編集対象ファイル

最後に、これまで説明してきた設定をどのファイルに行うかの説明です。画像タグ（HTMLタグの設定）の編集対象ファイルは下記の通りです。

なお、CSS は最初にCSSを追加した場所に追記して下さい。

対象ページ 編集するテンプレートファイル（<img> 周りのHTMLタグ）
（templates/article 内）
記事ページ webdir/1.html、2.html、... article.html、および、
templates/article/article_image_#.txt または templates/article/article_file.txt またはその両方（※2）
全一覧（目次） webdir/index.html article_list.txt
短い一覧（新着情報） webdir/index_short.html short_list.txt

※2 「添付ファイル付 ウェブページ更新ツール」（含 大容量版）で、ファイル欄を画像アップロード用に使っている場合に、 templates/article/article_file.txt が編集対象になります。

設定の反映

アップロード

テンプレートファイルの編集が終わったら、サーバの同じ位置に上書きアップロードして下さい。

再構築

管理画面一覧の「再構築（テンプレート反映）」ボタンを押すと最新のテンプレートを反映してページが自動更新されます。

表示確認

ブラウザのキャッシュを一旦クリアした後、ページを再読み込みして表示を確認して下さい。

制限事項

この方法はブラウザの JavaScript 機能を使いますので、ブラウザによっては期待通り動作しない場合があります。

関連記事

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

応用マニュアル ホームページ画面
形（縦横比）の違う画像を、幅か高さで揃えてホームページ上に並べる方法。CSSのサンプルと解説。

画像の縮小をする方法

基本のマニュアル ホームページ画面
ホームページ更新ツール「すぐ使えるCMS」からアップロードした画像を縮小する方法の説明です。オプション設定で画像の自動リサイズ（縮小）できます。サムネイルの作成も可能です。

広告