Files
hugo/docs/content/en/methods/resource/Fill.md
Bjørn Erik Pedersen 5fd1e74903 Merge commit '9b0050e9aabe4be65c78ccf292a348f309d50ccd' as 'docs'
```
git subtree add --prefix=docs/ https://github.com/gohugoio/hugoDocs.git master --squash
```

Closes #11925
2024-01-27 10:48:57 +01:00

1.2 KiB

title, description, categories, keywords, action, toc
title description categories keywords action toc
Fill Applicable to images, returns an image resource cropped and resized to the given dimensions.
related returnType signatures
methods/resource/Crop
methods/resource/Fit
methods/resource/Resize
methods/resource/Process
functions/images/Process
images.ImageResource
RESOURCE.Fill SPEC
true

Crop and resize an image to match the given dimensions. You must provide both width and height.

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

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

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

Example

{{ with resources.Get "images/original.jpg" }}
  {{ with .Fill "200x200 top webp q85 lanczos" }}
    <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 200x200 top webp q85 lanczos" example=true

}}