Web production note

　【更新日 : 】

【CSS , jQuery】画像を指定領域に上下中央揃えで収めるサンプル（レスポンシブ）

Category：
css / js
Tags：
, , ,

現在ではcssのみ（object-fit:cover;）で実現できます。
JavaScriptを利用するメリットは特にないため本記事は参考程度にご覧ください。

画像を指定領域にフィットさせて上下中央揃えで収めるサンプルです。
レスポンシブやフルスクリーンにも対応しています。

動作サンプル

画像を指定領域に上下中央揃えで収めるサンプル

html

<div class="img-full-wrap">
	<div class="img-full-area">
		<div class="img-wrap">
			<img src="img/sample.jpg" alt="サンプル写真">
		</div>
	</div>
</div>

css / sass

sass / compass

.img-full-wrap {
	position: relative;
	height: 400px;
}
.img-full-area {
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	.img-wrap {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
		overflow: hidden;
		width: 100%;
		height: 100%;
		min-height: 100%;
		min-width: 100%;
	}
	img {
		max-width: inherit;
		width: 100%;
		position: absolute;
	}
}
@media only screen and (max-width: 768px) {
	.img-full-wrap {
		height: auto;
		padding-top: 180px/280px*100%;
	}
}

css

.img-full-wrap {
  position: relative;
  height: 400px;
}

.img-full-area {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.img-full-area .img-wrap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-width: 100%;
}
.img-full-area img {
  max-width: inherit;
  width: 100%;
  position: absolute;
}

@media only screen and (max-width: 768px) {
  .img-full-wrap {
    height: auto;
    padding-top: 64.28571%;
  }
}

JavaScript

jQuery(document).ready(function($){
	imgDimension('.img-wrap','.img-full-area','.img-full-area',1200,875);
	$(window).on('resize load orientationchange', function(){
		imgDimension('.img-wrap','.img-full-area','.img-full-area',1200,875);
	});
	
	//背景画像fit ポジション 調整関数
	//targetHeightElm:基準の高さ targetWidthElm:基準の幅 imgWidth：比率用画像の幅 imgHeight：比率用画像の高さ
	function imgDimension(imgWrap,targetHeightElm,targetWidthElm,imgWidth,imgHeight) {
		var pWidth,pHeight;
		var targetHeight = $(targetHeightElm).height(); //表示範囲（高さ）
		var targetWidth = $(targetWidthElm).width();//表示範囲（幅）
		var imgWidthRatio = imgWidth;//画像比率（横）
		var imgHeightRatio = imgHeight;//画像比率（高さ）
		
		if (Number(targetWidth)*Number(imgHeightRatio)/Number(imgWidthRatio) < targetHeight) {
			pWidth = Math.ceil(Number(targetHeight) * Number(imgWidthRatio)/Number(imgHeightRatio));
			pHeight =  Number(pWidth)*imgHeightRatio/imgWidthRatio;
			$(imgWrap).css({
				'position': 'absolute',
				'top': 0,
				'left': (Number(targetWidth)-Number(pWidth))/2,
				'height':pHeight,
				'width':pWidth
			});
		} else {
			pHeight = Math.ceil(Number(targetWidth) * Number(imgHeightRatio)/Number(imgWidthRatio));
			pWidth =  Number(pHeight)*Number(imgWidthRatio)/Number(imgHeightRatio);
			$(imgWrap).css({
				'position': 'absolute',
				'top': (Number(targetHeight)-Number(pHeight))/2,
				'left': (Number(targetWidth)-Number(pWidth))/2,
				'height':pHeight,
				'width':pWidth
			});
		}
	}
});

親要素の高さが基準となるため、PCもリキッドにしたい場合は高さの指定をpaddingに変更してやります。

背景画像の background-size: cover; が使えない場合などの時に便利です。