Skip to content

Instantly share code, notes, and snippets.

@thatjeannie

thatjeannie/image-resize.js

Last active August 29, 2015 14:17
Show Gist options
  • Save thatjeannie/57157bc7c80475197fe0 to your computer and use it in GitHub Desktop.
Save thatjeannie/57157bc7c80475197fe0 to your computer and use it in GitHub Desktop.
Download ZIP
Iterate through images for dynamic sizing/positioning JQUERY HTML CSS
Raw
image-resize.js
$(document).ready(function() {
// math
// NEW height = VARIABLE width * original height / original width
// NEW width = VARIABLE height * original width / original height
// known knowns
// images must not be set to any max-width
// if image aspect ratio is less than one, it's a vertical image
// if image aspect ratio is greater than one, it's a horizontal image
// if image aspect ratio is less than box aspect ratio, it is more taller than wider than the box
// if image aspect ratio is greater than box aspect ratio, it is more wider than taller than the box
// thank you @jlegosama for explaining how each() loop works with $this
$(window).on('resize load', function() {
$(".listing-box").each(function() {
// Get the current .listing-box element (and its child .thumb)
// that has been passed to the loop and store it in a variable
var $box = $(this);
var $thumb = $(this).find(".thumb");
// get .listing-box width and height and aspect ratio
var boxWidth = $box.width();
var boxHeight = $box.height();
var boxAspect = (boxWidth / boxHeight).toFixed();
// get .thumb width and height and aspect ratio
var imgWidth = $thumb.width();
var imgHeight = $thumb.height();
var imgAspect = (imgWidth / imgHeight).toFixed();
// set some empty variables
var newWidth,
newHeight,
mTop,
mLeft;
/* console.log("@@ boxAspect " + boxAspect);
console.log("@@ imgAspect " + imgAspect);
console.log("@@ boxWidth " + boxWidth);
console.log("@@ boxHeight " + boxHeight);
console.log("@@ imgWidth " + imgWidth);
console.log("@@ imgHeight " + imgHeight); */
if (imgAspect < 1) {
// image is VERTICAL
// assign values
newWidth = (boxWidth).toFixed();
newHeight = (newWidth * imgHeight / imgWidth).toFixed();
mTop = ((newHeight - boxHeight) / 2).toFixed();
/* console.log("@@ mTop " + mTop); */
// use new values for inline css
$thumb.css({
width: newWidth + "px",
height: newHeight + "px",
marginTop: "-" + mTop + "px"
});
} else {
// image is HORIZONTAL
if (imgAspect > boxAspect) {
// image is more wider than taller
// assign values
newHeight = (boxHeight).toFixed();
newWidth = (newHeight * imgWidth / imgHeight).toFixed();
mLeft = ((newWidth - boxWidth) / 2).toFixed();
/* console.log("@@ mLeft " + mLeft); */
// use new values for inline css
$thumb.css({
width: newWidth + "px",
height: newHeight + "px",
marginLeft: "-" + mLeft + "px"
});
} else {
// image is more taller than wider
// assign values
newWidth = (boxWidth).toFixed();
newHeight = (newWidth * imgHeight / imgWidth).toFixed();
mTop = ((newHeight - boxHeight) / 2).toFixed();
/* console.log("@@ mTop " + mTop); */
// use new values for inline css
$thumb.css({
width: newWidth + "px",
height: newHeight + "px",
marginTop: "-" + mTop + "px"
});
}
}
/* console.log("newWidth " + newWidth);
console.log("boxWidth " + boxWidth);
console.log("newHeight " + newHeight);
console.log("boxHeight " + boxHeight); */
});
});
});
Raw
zzz.css
.listing-box {
width: 100%;
height: 220px;
position: relative;
overflow: hidden;
}
.thumb {
overflow: hidden;
}
Raw
zzz.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example using Bootstrap</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/400x600" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/600x400" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/800x400" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/200x160" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/200x200" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/400x400" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/800x800" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<div class="listing-box">
<div class="listing">
<!-- images must not be set to any max-width -->
<img src="http://placehold.it/100x100" alt="thumbnail" class="thumb">
</div>
</div>
</a>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment