小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

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

最終更新日: 2016-07-28

縦横比の違う画像を同じサイズで揃えるとは?

縦横比の違う画像の表示調整

CMS(ホームページ更新ツール)を使ってホームページの更新を行う場合、デザインした時に想定していたのとは違うサイズの画像をアップロードする場合があります。

この時、縦横比(アスペクト比、画像の形、縦長/横長 などが違うもの)が異なる画像がアップロードされると大きくデザインが崩れてしまったり、画像がゆがんでしまったりと、思いの他調整が難しいものです。

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

設定済サンプルのダウンロードもできます。

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

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

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

画像縦横比を調整済のCMSサンプル

このページでご紹介する方法で調整したCMSサンプルがダウンロードできます。

任意の画像サイズが指定可能

任意の画像サイズ指定
メイン画像とサムネイル画像に別々のサイズを指定する構成です。初期設定では 4:3 の横長画像の下に正方形のサムネイルが表示されるようになっています。

表示オンラインデモ 管理画面デモ

一覧の表示

正方形のサムネイル
新着情報(短い一覧)と目次(全一覧)には正方形のサムネイルが表示されるように設定してあります。

表示オンラインデモ 管理画面デモ

類似の方法

枠内にカットせずに収める

このページでご紹介する方法は、指定サイズ内に隙間ができないように画像を配置し、あふれた部分はカットします。カットせずに画像全体を表示したい場合は以下のサンプルもご覧ください。

画像をカットせずに指定領域に表示
このサンプルは、画像の表示高さを揃え、縦長の画像であれば画像の左右に隙間を取って画像全体を表示します。

表示オンラインデモ 管理画面デモ

画像の表示サイズ調整方法

以下では、指定サイズに合わせて画像を表示する方法をご説明します。設定済サンプルをダウンロードしなくても、お手元の製品に設定可能です。

サンプルをダウンロードした方は、ダウンロード後のページに表示される「ステップ by ステップガイド」をご覧になって設置した後、「画像のサイズ設定」からご覧下さい。

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 が読み込まれていれば追加不要です。
  • 青字の部分は外部ファイルに定義して読み込んでも構いません。(※1)
  • 赤字の部分は、画像が無い場合に表示する代替画像を指定して下さい。もし「No Image」などの画像表示が不要なら、この行を削除して下さい。
※1 ダウンロードできるサンプルでは、webdir/parts/js/sugu-335-image-size-adjustment.js という外部ファイルに含まれています。
<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」画像について

画像が無い場合の代替表示

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

ダウンロードできるサンプルでは webdir/parts/img/noimage.png がこの代替画像で、画像が無い場合は「No Image」と表示されます。画像が無い運用があり得ないような場合はこの部分の設定は不要です。

CSSの設定(共通)

個別の画像サイズを設定する前に、共通に必要になる CSS を設定します。

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

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

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

ダウンロードできるサンプルでは、webdir/parts/css/sugu-335-image-size-adjustment.css という外部ファイルに設定してあります。

追加するCSS

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

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

画像のサイズ設定

上記までで、サイズ調整のための道具立てが整いました。(サンプルをダウンロードした方は、ここまでの作業を省略できます。)

この後はそれぞれの画像に希望のサイズを設定していく作業です。

原理

設定の原則は、「縦横のサイズを決めたボックスに画像タグを収め、そのボックスにクラス『size-adjust』を設定する」です。サイズ調整したい画像をもう一つ別のタグで囲って、そこにCSSで表示したい幅(width)と高さ(height)を設定して下さい(下記例参照)。

設定例1: 新着情報画像

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

赤字は希望の表示サイズを設定して下さい。青字は表示のための必須設定です。後述の「注意点」と合わせてご覧下さい。

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

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

HTML

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

CSS

.main-thumbnail {
	position: relative;
	width: 100px; /* 画像の幅 */
	height: 100px; /* 画像の高さ */
	display: inline-block;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #999;
	overflow: hidden;
}

HTML設定の注意点

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

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> を作っています。

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

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

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

HTML: templates/article/article.html

<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

.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を追加した場所に追記して下さい。サンプルをダウンロードした方は webdir/parts/css/sugu-335-image-size-adjustment.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 機能を使いますので、ブラウザによっては期待通り動作しない場合があります。

関連リンク

さらに詳しく