Image centering

/*Downloaded from https://www.codeseek.co/arnaudpaul/image-centering-rLVoxX */
body{
	  background:lightgrey;
	}
.container{
		width: 100%;
		margin: 20px auto;
		max-width: 900px;
		
	}
	.button_content{
		max-height: 700px;
		transition: max-height 0.4s ease;
	}
	.image_container{
		
		position: relative;
		width: 100%;
		height: 500px;
		

		border:2px solid rgb(215,215,215);
		overflow: hidden;
		box-sizing: border-box;
	}
	.image_container h5{
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		line-height: 50px;
		background: rgba(255,255,255,0.5);
		text-align: center;
		z-index: 10;
		margin:0;
	}
	.image_container img{
		position: absolute;
	}
	.hidden{
		max-height: 0;
		overflow:hidden;
		transition: max-height 0.4s ease;

	}

/*Downloaded from https://www.codeseek.co/arnaudpaul/image-centering-rLVoxX */
function changeImage($id){
		var contents = document.querySelectorAll('.button_content');
		
		for (var i = 0; i < contents.length; i++) {
			contents[i].classList.add('hidden');
		}

		var content = document.getElementById($id);
		content.classList.remove('hidden');
		
		
	}


	function centerImage(options) {
	if (options == null) {
		options = {
			target : ".image_centered",
			image: 'img',
			offsetTop: 2,
			offsetLeft:2
		};
	}

	var elements = document.querySelectorAll(options.target);
	Array.prototype.forEach.call(elements, function(el, i){
		
		var imgWidth = el.querySelector(options.image).offsetWidth;
		var imgHeight = el.querySelector(options.image).offsetHeight;
		var containerWidth = el.offsetWidth;
		var containerHeight = el.offsetHeight;

		var leftDisp = (imgWidth - containerWidth) / options.offsetLeft;
		var margeWidth = leftDisp * 100 / containerWidth;

		var topDisp = (imgHeight - containerHeight) / options.offsetTop;
		var margeHeight = topDisp * 100 / containerHeight;

		if(imgWidth > containerWidth){

			el.querySelector(options.image).style.left = '-'+ margeWidth + '%'
		}

		if(imgHeight > containerHeight){
			el.querySelector(options.image).style.top = '-'+ margeHeight + '%'
		}
	});
}







// Normal center 
centerImage();

// center with options
centerImage({
	target:'.image_centered_with_options',
	image: '.image',
	offsetTop: 3,
	offsetLeft:4
});