How to Fit Image in Repeater

[karr]

Question:
How can I make an image fit into its container in a repeater?

Product:
Wix Studio Editor

What are you trying to achieve:
I need images to fit into their container in a repeater. Currently, they are cut and don’t show the entire content.

What have you already tried:
I tried the CSS object-fit property and it didn’t help.

Additional information:
The first screenshot shows the image being cut.

The second screenshot shows the image fitting into its container with the built-in event list component.

UPDATE:
Also, there are no options for the image element that seem to meet this need:

[loeiks]

In image settings you should have options like “fill”, “cover” etc. I don’t know if you tried them but they should fix it. I don’t mean the CSS editing, I’m referring to settings panel of images. (edit the first item’s image in the repeater)

Kolay gelsin.

[Pratham]

There is currently no way to directly change the image fit mode through the editor.
However you can do this using the Fit Mode property in Velo.

[karr]

Hi loeiks,

There are no options like fill or cover for the image element in the repeater. I’ve updated my question to add screenshots about that.

Teşekkürler =)

[loeiks]

All native images have this feature so even if you don’t see that you can use that feature via code add this line of code in your page to change the behavior for all images in that page:

$w("Image").fitMode = "fixedWidth";

The code above will effect all images and it may not the thing you are looking for so I’m not sure you can also replace “fixedWidth” from the options below:

• fixedWidth
• fit (this might be what you need)
• fill

So try them and see if it’s working. Normally you should have these options in the settings panel of image element interesting that you don’t see them somehow…

[karr]

Hi @Pratham and @loeiks,

Thank you both, it worked!

The entire code:

function filterDataset(startDate, endDate) {
    // Check if startDate and endDate are valid dates
    if (startDate && endDate) {
        // Filter dataset based on start date on or after the selected date
        $w("#datasetEvents").setFilter(wixData.filter()
            .ge("start", startDate) // "ge" means greater than or equal to
            .le("start", endDate)   // "le" means less than or equal to
            .eq("status", 'SCHEDULED')
        )
        .then(() => {
            if ($w("#datasetEvents").getTotalCount() === 0) {
                // Dataset is empty
                $w('#sectionEvents').collapse();
            }
            else {
                // Dataset has data
                $w('#sectionEvents').expand();
            }
        })
        .then(() => {
            $w("#repeaterToday").onItemReady(($item, itemData) => {
                // Get the image element within the repeater item
                const image = $item("#imageToday");
                // Set the fit mode of the image to "fit"
                image.fitMode = "fit";
            });            
        })
        .catch((err) => {
            console.error("Error applying filter:", err);
        });
    } else {
        console.error("Invalid startDate or endDate:", startDate, endDate);
    }
}

Now the images look like this: