Template:CSS image crop

{{CSS image crop
|Image         = The Name of the image file, or may accept {{Annotated image}}.
|bSize         = The Base Image width in pixels (the image we are cropping on)
|cWidth        = Crop Image Width in pixels
|cHeight       = Crop image Height in pixels
|oTop          = Offset Top in pixels, optional and defaults to 0 when omitted
|oLeft         = Offset Left in pixels, optional and defaults to 0 when omitted
|Location      = 'right', 'left', 'center' or 'none'. Determines placement of the image on the page
                 Defaults to 'right' when description is provided (as is default for thumb images)
                 When description is blank, location on left (as is default for non-thumbs)
|Description   = Description (will render out using thumbnail class)
|Link          = Name of an article to be linked by clicking on the image (omit unless there is a
                 good reason to link to an article instead of the image).
|Alt           = The alt text for the image.
|Page          = The page of the file, if there are multiple pages (such as pdf files).
|magnify-link  = The image to be linked by the magnify icon (Use if the Image parameter is set to
                 {{Annotated image}} or the Link parameter leads to something other than the image).
}}

Example 1

Example, cropping out all but desired end piece:

[[File:RA2-Bombcurs.png|center]]

Base image is 715×43, desired part of image is the final 55px, 715-55 gives an oLeft of 660:

{{CSS image crop|Image=RA2-Bombcurs.png|bSize=715|cWidth=55|cHeight=43|oLeft=660|Location=center}}

Example 2

Example, cropping out transparency mask and downscaling:

[[File:DeusEx-Image01_LibertyIsland.png|center]]

Base image is 512×512, desired part of image is 400×400:

{{CSS image crop|Image=DeusEx-Image01_LibertyIsland.png|bSize=512|cWidth=400|cHeight=400}}

Desired resolution is 256×256. 256/400 = 0.64. 512*0.64 = 328.

{{CSS image crop|Image=DeusEx-Image01_LibertyIsland.png|bSize=328|cWidth=256|cHeight=256}}

Example 3

Example, cropping out surrounding image:

[[File:TFA2004_5171_DR210_AB.png|center]]

Base image is 640×512. Desired part of image is 500×425 and starts at (68,26):

{{CSS image crop|Image=TFA2004_5171_DR210_AB.png|bSize=640|cWidth=500|cHeight=425|oLeft=68|oTop=26|Location=center}}

Example 4

Example:

[[File:TF2 Demo Marketing 3.png|center]]

Cropping to just the Demoman. Base image has a resolution of 750×750. Desired image starts at (80,175) with a width of 640 and height of 450:

{{CSS image crop|Image=TF2 Demo Marketing 3.png|bSize=750|cWidth=640|cHeight=450|oLeft=80|oTop=175|Location=center}}

Other sizes can be achieved by decreasing or increasing values by the same ratio. Desired size is half so all values are halved:

{{CSS image crop|Image=TF2 Demo Marketing 3.png|bSize=375|cWidth=320|cHeight=225|oLeft=40|oTop=88|Location=center}}