hugo/docs/content/en/methods/resource/Fill.md

title, description, categories, keywords, params

title	description	categories	keywords	params
Fill	Applicable to images, returns a new image resource cropped and resized according to the given processing specification.			functions_and_methods returnType signatures images.ImageResource RESOURCE.Fill SPECIFICATION

{{% include "/_common/methods/resource/global-page-remote-resources.md" %}}

Crop and resize an image according to the given processing specification. You must provide both width and height (such as 500x200) within the specification. Unlike Resize, which may stretch the image, Fill maintains the original aspect ratio by cropping the image to the target ratio before resizing. The operation uses the anchor and resampling filter provided, if any.

{{ with resources.Get "images/original.jpg" }}
  {{ with .Fill "500x200 TopRight lanczos" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

In the example above, "500x200 TopRight lanczos" is the processing specification.

{{% include "/_common/methods/resource/processing-spec.md" %}}

Example

{{ with resources.Get "images/original.jpg" }}
  {{ with .Fill "500x200 TopRight lanczos webp q85" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

{{< img src="images/examples/zion-national-park.jpg" alt="Zion National Park" filter="Process" filterArgs="fill 500x200 TopRight lanczos webp q85" example=true

}}