Question:
I have some elements I have duplicated on a page, and I think because the elements or containers are linked together, any image resizing/scaling is repeated across all linked elements. How do I allow each image to fit into the element instead of stretch/cropped all to the exact same size?
Product:
Using Wix Editor
What are you trying to achieve:
I’m trying to get images of different scales and proportions to all display appropriately on the page
What have you already tried:
There was a forum answer that recommended a feature called “fit image” but it was in some kind of code, and I don’t see any similar option in the wix editor.
Hi, Ben_Mason !!
You can achieve this functionality by using the fitMode of the image element. Since it might not be possible to set this directly from the editor, I’ll explain how to do it with Velo code. Here, I’ll assume that you’re displaying image data from a collection in a repeater through a dataset. Let’s say your repeater is $w("#repeater1"), and the image element embedded within it is $w("#image1"). To apply the fit mode to the image, you would need to write code like this: 
$w.onReady(function () {
$w("#repeater1").onItemReady(($item, itemData, index) => {
$item("#image1").fitMode = "fit";
});
});
Please check whether the fit mode is applied on the live site, as it doesn’t seem possible to verify this in the editor. 
Ok, I’ve turned on Dev mode and I can see the Velo editor, but it doesn’t appear to have any code written yet. Is there no existing code for the page?
I added the code above to the onReady function and updated the tags. The code ran successfully, but it looks like each container/item/image all have the exact same tag. In the test run, not all the images are fit like I am expecting, so I published to the live site and similarly not all images are “fit” correctly. How do I change these image tags to not be identical?
Velo code is designed as a higher-level programming language so that you don’t have to directly edit complex code. If every Wix user had to handle raw HTML to control Wix elements, then the advantages of using Wix would be lost. The benefit of Wix is that you can build a functional site with or without code to a certain extent. Therefore, understand that what you see on your editing screen can be fully represented without code. Wix users generally don’t need to be aware of the raw HTML behind their design; you could even say it’s hidden.
No one loves reading complex code. Instead, you can recognize images and repeaters as individual Wix elements and simply use Velo code to freely “add” actions to them. It really is that simple. That’s why, when you open the code panel for the first time, there is no existing code on the page. This is proof that “it works even without code!” Unless you’re doing something special, Wix is designed to function at a basic level without Velo code. But for those who want to add more freedom and creativity, Velo code is there for them.
Velo code is something you build “from scratch.” So, in the beginning, it’s blank. That’s Ok.
Ok thank you, I understand that the code is additive, not editing the existing functionality. I was thinking it was a coded mirror of the UI.
How do I edit the image functions separately? They use the same tags.
I added the code above to the onReady function and updated the tags. The code ran successfully, but it looks like each container/item/image all have the exact same tag. In the test run, not all the images are fit like I am expecting, so I published to the live site and similarly not all images are “fit” correctly. How do I change these image tags to not be identical?
The reason it’s not working is likely because onItemReady() is not being triggered. I thought the data was connected from the dataset, but I realized that the image is probably placed directly on the repeater. With that in mind, using code like the following should probably work!
$w.onReady(function () {
$w("#repeater1").forEachItem(($item, itemData, index) => {
$item("#image1").fitMode = "fit";
});
});
1 Like
Ok that worked! Now each image is shrunk to fit inside the image element. Is there a way to dynamically size the image element instead so that the image is maximized to the element width and sized vertically appropriately?
Edited to add: it looks like I can pick a middle-ground element size that will work without adding too much white space above/below the landscape images, and too much white space on either size of the portrait images. I would still prefer the elements to be dynamically sized too, but I’m not unhappy with this.
There are three types of fitMode: "fill", "fit", and "fixedWidth", and I think setting it to "fixedWidth" might work well. I haven’t tried it, though. 
$w.onReady(function () {
$w("#repeater1").forEachItem(($item, itemData, index) => {
$item("#image1").fitMode = "fixedWidth";
});
});
1 Like