Demo

The widget below shows how positioning, size, cropping and other common options can be applied to images and previewed before being uploaded.

Please feel free to download the image to the right entitled "Parsely the cat with bag". You can then click the grey image placeholder below, select the pic of Her Royal Felineness and try out the demo options.

If you'd prefer to choose your own image, please note that very large images can cause adverse effects.

Select an image...

placeholder

Position

left

right

centered

Size

small

medium

large

fluid

|

|

Upload

Cancel

OAR

Original Aspect Ratio

By default iline images are formatted to display in their original aspect ratio, (width / height).

STC

Square then Cropped

The 'Square Then Cropped' option adds pixels to an image to create a square version. Landscape images - height greater than width – have pixels added equally to the top and bottom, while portrait images – height greater than width – have pixels added equally to the sides. In both cases the result is a square image with a white background with a complete version of the original image centred.

CTS

Crop then Squared

The 'Cropped Then Square' option removes pixels from an image to create a square. Landscape images - height greater than width – have pixels removed equally from both sides, while portrait images – height greater than width – have pixels removed equally from the top and bottom. In both cases the reult is the largest possible square portion of the original image, taken from the centre.

Bordered

A CSS style addition

The 'Bordered' option adds the style name 'bordered' to the image which adds a thin grey border to the image. This can be useful when images contain a light background.

Rounded corners

A CSS style addition

The 'Rounded Corners' option adds the style name 'rounded' to the image which applies rounded corners using CSS style rules.

Rotate

A CSS style addition

The 'Rotate' options use CSS to increase or decrease the rotation of an image in increments of 90˚.