You could use CSS to resize and crop the image. Assume you have the following HTML.

<div class="crop">
  <img src="https://ykyuen.files.wordpress.com/2013/06/wpid-20130625_132111.jpg" />
</div>

Apply the following styles to crop and resize your image.

.crop {
  width: 200px;       /* Crop Size */
  height: 200px;      /* Crop Size */
  overflow: hidden;
}

.crop img {
  width: 500px;       /* Image Size */
  height: 375px;      /* Image Size */
  margin-top: -80px;  /* Adjust the y-position of the cropped area */
  margin-left: -80px; /* Adjust the x-position of the cropped area */
}

Done =)

Reference: StackOverflow – CSS Display an Image Resized and Cropped

http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped