TwicPics logoxReact Logo

Open in GithubOpen in StackBlitz
@twicpics-components
Documentation

anchor property

The anchor property positions the image in bothcontainandcovermode.

It allows to:
  • position the letterboxed image in its container incontainmode.
  • determine what should be visible when the image is cropped in cover mode.

Accepted values aretop,bottom,leftright,top-left,top-right,bottom-left,bottom-rightandcenter.

Please note that anchor is applied after an eventual transformation defined with preTransform property.

For a more specific positionning see position or focus properties in forcontainorcovermode respectively.

anchor="center"mode="contain"
anchor="center"mode="contain"
anchor="center"mode="cover"
anchor="center"mode="cover"