[JavaScript] 이미지 사이즈에 따라 영역 가로세로 크기 맞추기

 

 

 

위는 해상도를 resize 중이거나 mobile 사이즈로 새로고침 됐을 때 모두를 적용 할 수 있는 fucntion이다.

$(function(){
	function windowSize() {
		if ($(window).width() > 770) {
			// pc화면

		} else {
			// 모바일 사이즈
			if ($(window).width() < 769) {
				if ($(window).width() < 480) {
					$('.paging .paging-wrap a.active').prev().show();
					$('.paging .paging-wrap a.active').next().show();
				}
			}
		}
	}
	windowSize();

	$(window).resize(function() {
		windowSize();
		imgWidthHeight();
		imgWidthHeightAuto();
	});

})


$(window).load(function () {
	imgWidthHeight();
	imgWidthHeightAuto();
});

imgWidthHeight();
imgWidthHeightAuto();

 

 

해당 기능을 넣고 클래스만 적용해주면 된다. 

 

imgWidthHeight : 영역 짤리는 부분 짤리면서 꽉 맞추기

imgWidthHeightAuto : 이미지 짜리지 않게 안쪽으로 꽉 맞추기

 

 

다만 아쉬운점은 로딩시간이 조금 있어서 바로 적용이 안되고 반짝 하는 느낌이 있다.

function imgWidthHeight() {
	// 이미지 가로세로 맞추기
	var divs = document.getElementsByClassName('suc_img');
	// 이미지를 감싸는 a - width 100 height 100

	for (var i = 0; i < divs.length; ++i) {
		var div = divs[i];
		var divAspect = div.offsetHeight / div.offsetWidth; // div의 가로세로 값
		div.style.overflow = 'hidden';

		var img = div.querySelector('img'); // 이미지

		if (img == undefined)
			return;

		var imgAspect = img.height / img.width;

		if (imgAspect <= divAspect) {
			// 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 잘라낸다
			var imgWidthActual = div.offsetHeight / imgAspect;
			var imgWidthToBe = div.offsetHeight / divAspect;
			var marginLeft = -Math.round((imgWidthActual - imgWidthToBe) / 2);
			img.style.cssText = 'width: auto; height: 100%; margin-left: ' +
				marginLeft + 'px;'
		} else {
			// 이미지가 div보다 길쭉한 경우 가로를 div에 맞추고 세로를 잘라낸다
			var imgHeightActual = div.offsetWidth * imgAspect;
			var imgHeightToBe = div.offsetWidth * divAspect;
			var marginTop = Math.round((imgHeightActual - imgHeightToBe) / 2);
			img.style.cssText =
				'width: 100%; height: auto; margin-left: 0; margin-top: ' +
				-marginTop + 'px;'

		}
	}
}

function imgWidthHeightAuto() {
	// 이미지 가로세로 맞추기
	var divs = document.getElementsByClassName('fit_img'); // 이미지를 감싸는 a - basic
	for (var i = 0; i < divs.length; ++i) {
		var div = divs[i];
		var divAspect = div.offsetHeight / div.offsetWidth; // div의 가로세로 값
		div.style.overflow = 'hidden';

		var img = div.querySelector('img'); // 이미지
		var imgAspect = img.height / img.width;

		if (imgAspect <= divAspect) {
			// 이미지가 div보다 납작한 경우 세로를 div에 맞추고 가로는 잘라낸다
			img.style.cssText = 'width: 100%; height: auto;'
		} else {
			// 이미지가 div보다 길쭉한 경우 가로를 div에 맞추고 세로를 잘라낸다
			img.style.cssText = 'width: auto; height: 100%;'
		}
	}
}