CodePen

HTML

            
              <section>
  <p>cropped</p>
  <div class="thumbnail">
    <img src="http://i164.photobucket.com/albums/u25/sheffieldbleep/tDR/303/DSC_0106.jpg" />
  </div>
</section>



<section>
    <p>uncropped</p>
  <img src="http://i164.photobucket.com/albums/u25/sheffieldbleep/tDR/303/DSC_0106.jpg" />
</section>
            
          
!

CSS

            
              body{
  min-width: 1440px;
  margin:20px 60px;
  background:  url('http://oi49.tinypic.com/2ela2cl.jpg');
}

section {
  display: inline-block;
  vertical-align: top;
  margin: 0 20px;
}

p {
  line-height: 9px;
  font-family: sans-serif;
  color: white;
  font-weight: bold;
  text-shadow: 0 1px 6px black;
}

/* 
  to control the size of the thumbnail adjust the .thumbnail width and height
*/
.thumbnail { 
  width: 300px; 
  height: 300px; 
  overflow: hidden; 
}

/*
  to control the cropping adjust the .thumbnail img margin 
*/
.thumbnail img { 
  width: auto; 
  height: auto; 
  margin: -80px -324px; 
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
inline image cropping demo for css-tricks forum question: 

http://css-tricks.com/forums/discussion/21580/how-to-make-custom-thumbnail-with-css#Item_6
*/


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................