Skip to content

Instantly share code, notes, and snippets.

@mattgreenfield

mattgreenfield/index.html

Forked from anonymous/index.html
Last active April 1, 2016 08:39
Show Gist options
  • Save mattgreenfield/bd41f6a5ca16ca8981bf53a120e661a5 to your computer and use it in GitHub Desktop.
Save mattgreenfield/bd41f6a5ca16ca8981bf53a120e661a5 to your computer and use it in GitHub Desktop.
Download ZIP
Image Gallery Centring - JS Bin// source https://jsbin.com/jevigubacu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.grid__item {
width: 25%;
height: 0;
padding-bottom: 25%;
display: inline-block;
overflow: hidden;
position: relative;
}
.image {
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="grid__item">
<img class="image" src="http://placehold.it/350x150">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/150x150">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/350x650">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/350x250">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/180x150">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/350x350">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/30x150">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/350x150">
</div>
<div class="grid__item">
<img class="image" src="http://placehold.it/350x150">
</div>
<script id="jsbin-javascript">
function thumbnailSizes(){
var images = document.getElementsByClassName('image');
for (i = 0; i < images.length; i++){
var image = images[i];
var naturalWidth = image.naturalWidth;
var naturalHeight = image.naturalHeight;
// Work out the images orientation
var orientation = "portrait";
if(naturalWidth > naturalHeight){
orientation = "landscape";
}
else if(naturalWidth == naturalHeight){
orientation = "square";
continue;
}
// Get the middle of each rendered image
var xMiddle = image.offsetWidth / 2;
var yMiddle = image.offsetHeight / 2;
// Get the container height and width
var containerHeight = image.parentNode.offsetHeight;
var containerWidth = image.parentNode.offsetWidth;
if(orientation === "portrait"){
image.style.width = "100%";
image.style.top = - (yMiddle - (containerHeight/2) ) + 'px';
}
if(orientation === "landscape"){
image.style.height = "100%";
image.style.left = - (xMiddle - (containerWidth/2) ) + 'px';
}
if(orientation === "square"){
image.style.width = "100%";
}
}
}
thumbnailSizes();
</script>
<script id="jsbin-source-css" type="text/css">
.grid__item {
width: 25%;
height: 0;
padding-bottom: 25%;
display: inline-block;
overflow: hidden;
position: relative;
}
.image {
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">
function thumbnailSizes(){
var images = document.getElementsByClassName('image');
for (i = 0; i < images.length; i++){
var image = images[i];
var naturalWidth = image.naturalWidth;
var naturalHeight = image.naturalHeight;
// Work out the images orientation
var orientation = "portrait";
if(naturalWidth > naturalHeight){
orientation = "landscape";
}
else if(naturalWidth == naturalHeight){
orientation = "square";
continue;
}
// Get the middle of each rendered image
var xMiddle = image.offsetWidth / 2;
var yMiddle = image.offsetHeight / 2;
// Get the container height and width
var containerHeight = image.parentNode.offsetHeight;
var containerWidth = image.parentNode.offsetWidth;
if(orientation === "portrait"){
image.style.width = "100%";
image.style.top = - (yMiddle - (containerHeight/2) ) + 'px';
}
if(orientation === "landscape"){
image.style.height = "100%";
image.style.left = - (xMiddle - (containerWidth/2) ) + 'px';
}
if(orientation === "square"){
image.style.width = "100%";
}
}
}
thumbnailSizes();</script></body>
</html>
Raw
jsbin.jevigubacu.css
.grid__item {
width: 25%;
height: 0;
padding-bottom: 25%;
display: inline-block;
overflow: hidden;
position: relative;
}
.image {
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Raw
jsbin.jevigubacu.js
function thumbnailSizes(){
var images = document.getElementsByClassName('image');
for (i = 0; i < images.length; i++){
var image = images[i];
var naturalWidth = image.naturalWidth;
var naturalHeight = image.naturalHeight;
// Work out the images orientation
var orientation = "portrait";
if(naturalWidth > naturalHeight){
orientation = "landscape";
}
else if(naturalWidth == naturalHeight){
orientation = "square";
continue;
}
// Get the middle of each rendered image
var xMiddle = image.offsetWidth / 2;
var yMiddle = image.offsetHeight / 2;
// Get the container height and width
var containerHeight = image.parentNode.offsetHeight;
var containerWidth = image.parentNode.offsetWidth;
if(orientation === "portrait"){
image.style.width = "100%";
image.style.top = - (yMiddle - (containerHeight/2) ) + 'px';
}
if(orientation === "landscape"){
image.style.height = "100%";
image.style.left = - (xMiddle - (containerWidth/2) ) + 'px';
}
if(orientation === "square"){
image.style.width = "100%";
}
}
}
thumbnailSizes();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment