Streaming live at 10am (PST)

[Noob] Simple question for image scale inside container

Hey everyone,

Being currently new to Webflow, I need the help of the community because there is still a grey area that I can hardly answer. Indeed, I would like to make a slider composed of three images. As a result, I created 3 columns within my slider. In each of these columns is an image for which the size should fill the entire space formed by the column. Nevertheless, I have trouble doing this simple task because I don’t really understand how images are manipulated inside Webflow.


As you can see in my image, I managed to fill the whole column with the image (I associated the image settings in copy). This one fills the whole space well, nevertheless its shape/scale is impacted. Hence, is there a way to fill, as I did, the column without impacting the shape of the image ?


I have prepared a small visual example of the behaviour of the image I would like to obtain.

Could someone please explain to me what mistake I’m making?
It may be simple, but I obviously have a hard time understanding :stuck_out_tongue:
Thank you in advance for your help !!

Best regards,
Alexandre

Hi Alexandre,

could you provide a ‘Read-Only’ link to your site, that way we can see what settings you are using and suggest a solution.

Cheers
Keiran

Hey Keiran,

Yup, here is my share link

https://preview.webflow.com/preview/alexandres-supercool-project-62a2ea?utm_medium=preview_link&utm_source=dashboard&utm_content=alexandres-supercool-project-62a2ea&preview=77fb7f04d759368cc90f4a0b2a07d9b4&mode=preview

It’s just a blank page that helps me understanding how Webflow works by playing with different tools ! :stuck_out_tongue:

Thank you !

Hey Keiran,

Thanks for the reply.
Here is my share link.

https://preview.webflow.com/preview/alexandres-supercool-project-62a2ea?utm_medium=preview_link&utm_source=dashboard&utm_content=alexandres-supercool-project-62a2ea&preview=77fb7f04d759368cc90f4a0b2a07d9b4&mode=preview

As I said, i’m just using this blank page to test webflow assets.

Hi Alexandre,

Thanks for providing the link.

So my understanding is, you would like to have each image to fully ‘cover’ its container (in this case the column with the slide). Is that correct?

If so, there are some things to know about images and it’s sizing.

An image will try to keep it’s original aspect ratio when placed inside a container. If the property of the container is set to stretch (to fill the container) then the dimensions of the photo will change and therefore become distorted. (Unless a specific size property is set on the image)

What to do?
You can use a photo as a ‘background’ to the container. This will allow you to ‘cover’ the container without distorting the image, but it may ‘cut’ off part of the image based on the original aspect ratio of the image.

Here are some pictures to show the difference:

Images have different dimensions, shown in the slider as original size.

Image used as a background and set to cover, no distortion, but the image is ‘cut off’ to fill the container based on its original aspect ratio.

Hope that helps,
Keiran

1 Like

Thank you very much for your help Keiran !!
Much appreciated ! :innocent: