This key defines how images fit within their containers in the gallery section of a Card.
Setting this key to padded adds padding around images to maintain aspect ratio, contain ensures images fit entirely within the container by setting the largest dimension of the image to the largest dimension of the container while maintaining aspect ratio, cover ensures images cover the entire container while maintaining aspect ratio with the center of the image aligned with the center of the container, and cover-top ensures images cover the entire container while maintaining aspect ratio with the top of the image aligned with the top of the container.
Appears in
Type
string
Default value
padded
Allowed values
paddedcovercontaincover-topExamples
In this example, we have configured the gallery fit to use cover so images cover the entire container while maintaining aspect ratio, aligning the center of the image with the center of the container.
collections_config:
blog:
preview:
gallery:
image:
- key: featured_image
fit: cover{
"collections_config": {
"blog": {
"preview": {
"gallery": {
"image": [
{
"key": "featured_image"
}
],
"fit": "cover"
}
}
}
}
}