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)

Resize

Specify the height and preserve ratio

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

Resize

Specify the width and height

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

Resize

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).

Center

Float Left

Float Left

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

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

Float Right

Float Right

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

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