<!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
});