CSS – Resize and Crop Image

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" />


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



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.