How to Make CSS Style Changes with Javascript

Ask the community
,
1

Hey all,

I’m trying to figure out how I can use Velo and javascript to change the object-fit CSS property of an image on my page.

Currently, I am loading a random image from a collection onto an image element. I want the image to display in the proper proportions, but within the bounds of the existing image element.

In the editor I am only given these options:

No combination of these options achieves my desired result.

Right now, when the page is viewed, the image has an “object-fit” property set to “fill:”

I want to use javascript to change it from “fill” to “contain,” which gives the result I want when I test it in Chrome’s developer tools.

Does anyone know how I can achieve this CSS change via javascript? Thanks a ton!

2

Not sure if this helps, but perhaps using ‘fit’ on the image would help. It means that the image will keep its proportions but the width would be the width of the image in the editor.

Here’s a link to the API documents if it helps - https://www.wix.com/velo/reference/$w/image/fitmode

3

Ah! That’s perfect! Thanks so much, Noah!