【マウスオーバー】CSSのobject-fitとofi.min.jsで画像の表示領域サイズ固定に対応

サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。メイン画像の表示領域をサイズ固定で正方形にした場合の対応です。画像にはCSSのobject-fitを設定し、object-fit未対応のIE11用にofi.min.jsを利用します。

くまのクッキー

パンとコーヒー

イチゴのかき氷

自作のjQueryで対応した記事は下記になります。
CSSのobject-fitとofi.min.js以外の設定は下記の記事と同様の構造です。

メイン画像のCSSにobject-fitを設定をします。object-fit未対応のIE11用に、font-family: ‘object-fit: contain;’を記述します。なおobject-fitを動作させるには、メイン画像に表示領域サイズであるwidthとheightの指定が必要です。

.main_img_inner img {
	width: 334px;
	height: 334px;
	object-fit: contain;
	font-family: 'object-fit: contain;'
}

最後にjQueryのコードです。
IE11でobject-fitが動作するように、ページ読み込み時とサムネイル画像マウスオーバー時にofi.min.jsを起動します。ページ読み込み時のみだと、マウスオーバー時に画像がobject-fitに対応できません。

$(function() {
	objectFitImages('.main_img_inner img');

	$('.thum_img div img').hover(function() {
		var thum_text = $(this).parent().find('.thum_title').text();
		var thum_src = $(this).attr('src');
		var main_src = $('.main_img img').attr('src');

		if(thum_src != main_src){
			$('.main_img_inner').empty();
			$(this).clone().appendTo('.main_img_inner');
			$('.main_title').empty();
			$('.main_title').append(thum_text);
		}

		objectFitImages('.main_img_inner img');
	});
});