「background-size:cover」をjQueryで実現する方法

コーディング / 2017.07.10

cssのbackgroundプロパティで使用できる「cover」という値は、画像の縦横比を保ったまま背景領域を全て覆うように自動で拡大縮小する便利なプロパティです。
ただ、この値を使うには画像を背景に指定する必要があり、imgタグで画像を配置したい場合は使用できません。そこで今回は、imgタグでも同じ効果を再現できるjQueryを紹介します。

デモはこちら。実際のコードは以下です。

html

<div class="box">
	<figure><img src="https://sole-color-blog.com/manage/wp-content/uploads/2016/03/bgImg01.jpg" alt=""></figure>

	<p>サンプルです</p>
</div>

<p>サンプルです</p>

</div>

css

.box {
	width:250px;
}
.box figure {
	position:relative;
	height:250px;
}
.box figure img {
	position:absolute;
	max-width:100%;
	height:auto;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.box {

width:250px;

}

.box figure {

position:relative;

height:250px;

}

.box figure img {

position:absolute;

max-width:100%;

height:auto;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

$(window).on("load",function(){
	// 画像の高さを取得する
	var imgH = $(".box figure img").height ();
	// 画像の高さが250px以下なら高さを優先する
	if( imgH < 250 ) {
		$(".box figure img").css({
"max-width":"none",
"width":"auto",
"height":"100%"
});
}
});