Image Processing

This article offers some use cases for showing how to resize and align images.

Resizing Images

We use the URL query of image for resizing images. For example:

Specify the width and preserve ratio

1![Resize](featured-sample.png?width=300px)

Specify the height and preserve ratio

1![Resize](featured-sample.png?height=200px)

Specify the width and height

1![Resize](featured-sample.png?width=300px&height=200px)

It can be used not only for page resources , but also for the static images and external images. However, in addition to page resources, others are resized by inline style, that is, their original size will not change.

Aligning Images

We can easily align images by adding URL fragments. Such as #center, #floatleft and #floatright represents align center, float left and float right respectively.

Center

Adding the #center fragment for aligning images to the center.

For example: ![Center](/featured-sample.png#center).

Float Left

Adding the #floatleft fragment for floating images to the left.

For example: ![Float Left](/featured-sample.png#floatleft).

Float Right

Similarly, we can also float images to the right by adding the #floatright fragment.

For example: ![Float Right](/featured-sample.png#floatright).