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.
By default iline images are formatted to display in their original aspect ratio, (width / height).
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.
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.
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.
The 'Rounded Corners' option adds the style name 'rounded' to the image which applies rounded corners using CSS style rules.
The 'Rotate' options use CSS to increase or decrease the rotation of an image in increments of 90˚.