Image centering

In this example below you will see how to do a Image centering with some HTML / CSS and Javascript

A little JavaScript snippet to center images inside their div.With options, you can change the default targets ( container and image ) and the default offsets.

Thumbnail
This awesome code was written by arnaudpaul, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright arnaudpaul ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Image centering</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
		<div class="buttons">
			<button class="button" onclick="changeImage('original')">Original image</button>
			<button class="button" onclick="changeImage('notCentered')">Image not centered</button>
			<button class="button" onclick="changeImage('centered')">Image centered</button>
			<button class="button" onclick="changeImage('centereredWithOptions')">Image centered with options</button>
		</div>
	
	<div class="button_content" id="original">
		<div class="image_container " >
			<h5>Original image</h5>
			<img src="https://cdn.magdeleine.co/wp-content/uploads/2016/06/photo-1461722936851-13a79b294a5d-1400x934.jpeg" style="width:100%; position:relative">
		</div>
	</div>
	<div class="button_content hidden" id="notCentered">
		<div class="image_container">
			<h5>Image not centered</h5>
			<img src="https://cdn.magdeleine.co/wp-content/uploads/2016/06/photo-1461722936851-13a79b294a5d-1400x934.jpeg" >
		</div>
	</div>
	<div class="button_content hidden" id="centered">
		<div class="image_container image_centered">
			<h5>Image centered</h5>
			<img src="https://cdn.magdeleine.co/wp-content/uploads/2016/06/photo-1461722936851-13a79b294a5d-1400x934.jpeg">
		</div>
	</div>
	<div class="button_content hidden"  id="centereredWithOptions">
		<div class="image_container image_centered_with_options">
			<h5>Image centered with options</h5>
			<img class="image" src="https://cdn.magdeleine.co/wp-content/uploads/2016/06/photo-1461722936851-13a79b294a5d-1400x934.jpeg" >
		</div>
	</div>
	</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*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
});

Comments