2016年1月14日

森島

【怖くないJavaScript + jQuery】画像の縦横比を保ったままサイズを変更する処理

マークアップ

facebook
twitter

画像の縦横比（アスペクト比）を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。

1 下準備
2 縦横比を調べるには？
3 例1：background-size:cover;のような効果をimgで得る
4 例2：例1を複数のdivに適用させたい場合
- 4.1 ▼js

下準備

jQueryと、自分で作ったjavascriptのファイル（今回は aspct.js とします）を読み込みます。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="aspct.js" charset="utf-8"></script>

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script> <script type="text/javascript" src="aspct.js" charset="utf-8"></script>

縦横比を調べるには？

画像の縦横比を調べるには、当たり前なのですが、画像の横幅と縦幅を取得して「横幅÷縦幅」の計算をすれば簡単に割り出すことができます。（横幅÷縦幅が1以上になれば、横長の画像と言うことになります。）

//img#sampleの縦横比を調べる
$(function(){
		var imgWidth = $('img#sample').width();　//img#sampleのwidthを調べてimgWidthに代入
		var imgHeight = $('img#sample').height();　//img#sampleのheightを調べてimgHeightに代入

			aspectRatio = imgWidth / imgHeight　//横幅÷縦幅の値をaspectRatioに代入
			
			if(aspectRatio >= 1){
				//横長画像の場合の処理（横幅÷縦幅が1以上になる場合）
			}else{
				//縦長画像の場合の処理
			}
});

//img#sampleの縦横比を調べる

$(function(){

var imgWidth = $('img#sample').width();　//img#sampleのwidthを調べてimgWidthに代入

var imgHeight = $('img#sample').height();　//img#sampleのheightを調べてimgHeightに代入

aspectRatio = imgWidth / imgHeight　//横幅÷縦幅の値をaspectRatioに代入

if(aspectRatio >= 1){

//横長画像の場合の処理（横幅÷縦幅が1以上になる場合）

}else{

//縦長画像の場合の処理

}

});

上記の縦横比を調べる処理を使用して、ひとつ例の処理を書いてみましょう。

例1：background-size:cover;のような効果をimgで得る

background-size:cover;の一文が使えればどんなに楽か。しかし印刷対応で使用することができません、そんな時。divでimgを囲み、divにoverflow:hidden;をかけます。

デモはこちら

▼HTML

div#sampleに、縦長のimgを表示させます。

<div class="sample"><img src="photo.jpg" alt=""></div>

1	<div class="sample"><img src="photo.jpg" alt=""></div>

▼CSS

divにはwidthとheightを指定し、overflow:hidden;をかけ、imgのはみ出た部分が非表示になるように設定します。

.sample{
	display:block;
	width:300px;
	height:200px;
	text-align:center;
	position:relative;
	overflow:hidden;
	border:#CCC solid 2px;
}
.sample img{
	position:absolute;
	top:0;
	left:0;
}

.sample{

display:block;

width:300px;

height:200px;

text-align:center;

position:relative;

overflow:hidden;

border:#CCC solid 2px;

}

.sample img{

position:absolute;

top:0;

left:0;

}

▼js

短い方の辺をdivのサイズに合わせるようにcssをつけます。

$(function(){
	
		var imgWidth = $('.sample img').width();
		var imgHeight = $('.sample img').height();
		
		aspectRatio = imgWidth / imgHeight
	
		if(aspectRatio >= 1){
			//横長画像の場合 divのheightに数値を合わせる
			$('.sample img').css('height','200px');
		}else{
			//縦長画像の場合 divのwidthに数値を合わせる
			$('.sample img').css('width','300px');

			//上下中央揃えにする場合は下記2行も
			var i = (imgHeight-200)/2  //はみ出た部分を計算して÷2し、ネガティブマージンをつける
			$(this).find('img').css('margin-top', '-'+i+'px');

		}
	
	
});

$(function(){

var imgWidth = $('.sample img').width();

var imgHeight = $('.sample img').height();

aspectRatio = imgWidth / imgHeight

if(aspectRatio >= 1){

//横長画像の場合 divのheightに数値を合わせる

$('.sample img').css('height','200px');

}else{

//縦長画像の場合 divのwidthに数値を合わせる

$('.sample img').css('width','300px');

//上下中央揃えにする場合は下記2行も

var i = (imgHeight-200)/2 //はみ出た部分を計算して÷2し、ネガティブマージンをつける

$(this).find('img').css('margin-top', '-'+i+'px');

}

});

例2：例1を複数のdivに適用させたい場合

imgを複数並べて一覧にしたい。その場合は、jsの処理が少々複雑になります。例1のままだと、一番最初に取得したimgの値が他の画像にも適用されてしまうため、大きさがちぐはぐになってしまいます。.eachを使用すれば、div毎に同じ処理を走らせることができます。

失敗デモはこちら
成功デモはこちら

▼js

jsに手を加えます。下記のように「each」で挟むと、全てのdiv.sampleに同じ処理が走ります。
「$(‘.sample img’)」を全て「$(this).find(‘img’)」に書き換えます。thisを使うと、処理中の要素という意味になります。

$(function(){
		
	$('.sample').each(function(){
		
		var imgWidth = $(this).find('img').width();
		var imgHeight = $(this).find('img').height();
		
		aspectRatio = imgWidth / imgHeight
	
		if(aspectRatio >= 1){
			//横長画像の場合 divのheightに数値を合わせる
			$(this).find('img').css('height','200px');
		}else{
			//縦長画像の場合 divのwidthに数値を合わせる
			$(this).find('img').css('width','300px');
			
			//上下中央揃えにする場合はこれも
			var iHeight = $(this).find('img').height();
			var i = (iHeight-200)/2
			$(this).find('img').css('margin-top', '-'+i+'px');

		}

	});
	
});