gohugoio--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" %}}

The Fill method returns a new resource from a processable image according to the given processing specification.

Note

Use the reflect.IsImageResourceProcessable function to verify that an image can be processed.

Usage

When filling, you must provide both width and height (such as 500x200) within the specification. Fill maintains the original aspect ratio by resizing the image to cover the target area and cropping any overflowing pixels based on the anchor provided.

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

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

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

Example

{{ with resources.Get "images/original.jpg" }}
  {{ with .Fill "500x200 TopRight" }}
    <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" example=true

}}