Clip: cropping an image - CSS learning and sharing on JSFiddle

August 12, 2016

Clip is the CSS feature to clip an image using scripts. Julia spent more than one hour to work on a few lines of CSS code, and then, she chose to use a specific image to help.

If you have an image with 500px x 500px, you may like to get one small image with size 100px x 100px without using Microsoft paint to cut and save as a new file. The solution is to use CSS clip.

Basics to find out the solution:
CSS:
1. position relative/ absolute
2. rect
3. clip
4. an example to explain how to put together
5. play with Firefox firebug, and then figure out CSS settings.

Study the article:
http://www.xul.fr/en/css/clip.php

Spent more than 1 hour to figure out how to set up .clipzone width and height. There are a few ways to set up CSS, but she likes to write down her tips to solve the problem.

After more than one hour confusion, she decided to customize an image with some grids and text, with size of 500px x 500px, see the following:

With a few mistakes, she figured out how to configure them quickly. Let us talk about a problem, and then, solve the problem using CSS clip property based on the article (ref. 2).

Problem statement:
How to clip the image 100px x 100px in the center of the above image, with text 13?

Here is the image: 

The element is to be cropped in an outer container, and the clip zone
- Julia's tip 1:  make the zone the whole image:

.clipzone
{
    position: relative;
    width:  500px;
    height: 500px;
    overflow: hidden;
}

.clipped
{
    position: absolute;
}

<div class="clipzone"> <img class="clipped" id="image1" src="" /> </div>

This container is integrated in the flow of the contents of the page with the relative position and allows the content to have the absolution position. The property overflow: hidden avoids exceeding the limit of the container.

so add the clip css property and value into class clipped, and add this rule:
.clipped
{
position: absolute;
clip: rect(200px, 200px, 300px, 300px);   /* top left right bottom*/
}

And then, the image using clip CSS property will be:

Julia's tip 2: 
Add one more rule:
margin-left: -200px;

With the above rule, the clipped image will be positioned at 0 position; in other words, to get any image, for example,
with text: 11, set margin-left: 0px;
with text: 12: set margin-left: -100px;
with text: 13: set margin-left: -200px;
with text: 14, set margin-left: -300px;
with text: 15, set margin-left: -400px;

so the image is always positioned the same place.

References:
1. http://www.w3schools.com/cssref/pr_pos_clip.asp
2. http://www.xul.fr/en/css/clip.php

Actionable Items:

1. clip an image using CSS

https://jsfiddle.net/jianminchen/ksdcgomx/

2. original image vs clipped image

https://jsfiddle.net/jianminchen/hxgakk5n/
1. clipped image: 2. orginal image comparison to the clipped image

Blog reading: 
1. Google keyword search: JavaScript Separate of concern
how to structure JavaScript better?
Study the code - example to follow
 http://stephen-young.me.uk/2013/01/05/maintainable-js-with-modules.html

Watch and learn: Microsoft agile development - Bing






Microsoft Development Services for the DevOps Era