What is the difference between cover, fill and contain?

vDesigner 2.0
1

What is the difference between cover, fill and contain?

2 Likes
2

This Allows you to configure the size of the icon (image of the icon) in the container based on the following options:
–> Cover:-
It expands the width of the image in the image container to maintain the aspect ratio. After applying this option, the height of the image may be cropped in the image container.

–> Fill: –
After you select this option, it stretches the width and height of the image to fit the image in the image container.

–> Contain:-
After you select this option, it may resize the image to fit it in the image container to maintain the aspect ratio.

2 Likes
3

Imagine you have a picture frame and a photo you want to display inside it. The options you described are like different ways to fit the photo within the frame:

  1. Cover: This is like placing the photo into the frame and letting it fill the width exactly. The photo’s height might get cut off if it doesn’t perfectly match the frame’s proportions. It’s like zooming in to fill the frame horizontally.

  2. Fill: This is like stretching the photo to fit both the width and height of the frame. This can distort the image if the photo’s proportions don’t match the frame’s. Imagine stretching a rectangular photo to fit a square frame.

  3. Contain: This is like resizing the photo to fit entirely within the frame while maintaining its original proportions. There might be empty space around the photo in the frame if its proportions don’t perfectly match. It’s like shrinking the photo to fit inside the frame without cutting anything off.

1 Like