Browse Docs

Filling Images

HugoMods Authors March 25, 2023 1 min read Docs Markdown Fill

Crop and resize an image to match the given dimensions.

On this page
Donate

Syntax

You must provide both width and height. Use the anchor1 option to change the crop box anchor point.

1![Fill Image](featured.jpeg?fill=[width]x[height],[anchor])
  • [width]x[height]: required.
  • [anchor]: optional.

Examples

Originali image
Original image

Examples
Fill Image
fill=150x200,TopLeft
Fill Image
fill=150x200,Top
Fill Image
fill=150x200,TopRight
Fill Image
fill=150x200,Left
Fill Image
fill=150x200,Center
Fill Image
fill=150x200,Right
Fill Image
fill=150x200,BottomLeft
Fill Image
fill=150x200,Bottom
Fill Image
fill=150x200,BottomRight

  1. The anchor determines the placement of the crop box. You may specify TopLeft, Top, TopRight, Left, Center, Right, BottomLeft, Bottom, BottomRight, or Smart. The default value is Smart. ↩︎

Cropping
Fitting