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

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s