Center Crop Image with jquery

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

Adjust and crop image into container, calculating the proportion of container vs the proportion of image, adjusting it in vertical or horizontal depending of it

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

<head>
  <meta charset="UTF-8">
  <title>Center Crop Image with jquery</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  font-family: 'arial', sans-serif;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  margin: 0;
}
ul {
  overflow: hidden;
  display: block;
}
ul li {
  display: block;
  float: left;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  border: 3px solid #ccc;
}
.hor {
  width: 200px;
  height: 140px;
}
.vert {
  width: 160px;
  height: 200px;
}
.cuad {
  width: 200px;
  height: 200px;
}
.resp li {
  width: 30%;
  height: 200px;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h1>Center Crop Image - Fixed sizes box</h1>
<ul class="fixed cropcenterimg">
  <li class="cuad"><img src="http://www.desktop4ipad.com/wp-content/uploads/2011/07/Landscape-Grass_O-500x500.jpg"/></li>
  <li class="vert"><img src="http://hqdesktop.net/wallpapers/l/1920x1080/29/mountains_landscapes_venezuela_waterfalls_angel_falls_1920x1080_28165.jpg"/></li>
  <li class="hor"><img src="http://freewallpaperdesktop.info/wp-content/uploads/2013/04/HD-Wallpaper-Fantasy-Landscape-at-The-Mountain-300x200.jpg"/></li>
</ul>
<br/>
<h1>Center Crop Image - Responsive sizes box</h1>

<ul class="resp cropcenterimg">
  <li><img src="http://www.desktop4ipad.com/wp-content/uploads/2011/07/Landscape-Grass_O-500x500.jpg"/></li>
  <li><img src="https://members.westnet.com.au/florisson/images/_MG_3442.jpg"/></li>
  <li><img src="http://freewallpaperdesktop.info/wp-content/uploads/2013/04/HD-Wallpaper-Fantasy-Landscape-at-The-Mountain-300x200.jpg"/></li>
</ul>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/jaycozzy/center-crop-image-with-jquery-ByDhJ */
body {
  font-family: 'arial', sans-serif;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
img {
  display: block;
  margin: 0;
}
ul {
  overflow: hidden;
  display: block;
}
ul li {
  display: block;
  float: left;
  margin-right: 10px;
  overflow: hidden;
  text-align: center;
  border: 3px solid #ccc;
}
.hor {
  width: 200px;
  height: 140px;
}
.vert {
  width: 160px;
  height: 200px;
}
.cuad {
  width: 200px;
  height: 200px;
}
.resp li {
  width: 30%;
  height: 200px;
}


/*Downloaded from https://www.codeseek.co/jaycozzy/center-crop-image-with-jquery-ByDhJ */
$(function() {
	CenterCropImage($('.cropcenterimg li'))
	$(window).resize(function(){
		CenterCropImage($('.cropcenterimg li'))
	})
})

/***CENTER CROP IMAGE***/
function CenterCropImage(x){
    x.each(function(){
        $(this).children('img').load(function(){
            ContentBox=$(this).parent()
            PropBox=getProportions(ContentBox)

            ImgtoResize=$(this)
            PropImg=getProportions(ImgtoResize)
            if(PropBox>PropImg){
                ProportionVertical(ImgtoResize)
            }
            else{
                ProportionHorizontal(ImgtoResize)
            }      
        })
        ContentBox=$(this)
        PropBox=getProportions(ContentBox)

        ImgtoResize=$(this).children('img')
        PropImg=getProportions(ImgtoResize)
        if(PropBox>PropImg){
            ProportionVertical(ImgtoResize)
        }
        else{
            ProportionHorizontal(ImgtoResize)
        }
    })
}


function getProportions(x){
    Height=x.height()
    Width=x.width()
    Prop=Width/Height
    return Prop
}
 
function ProportionHorizontal(x){
    x.removeAttr("style")
    x.css({'height':'100%','width':'auto'})
    Wimg=x.width()
    Wcont=x.parent().width()

    MarginLeft=(Wcont-Wimg)/2
    x.css({'margin-left':MarginLeft})
}
 
function ProportionVertical(x){
    x.removeAttr("style")
    x.css({'width':'100%','height':'auto'})
    Himg=x.height()
    Hcont=x.parent().height()

    MarginTop=(Hcont-Himg)/2
    x.css({'margin-top':MarginTop})
}

Comments