0

If you specify dimensions in the style prop of an <Image> component in React Native, adding resizeMode={'contain'} causes the image to preserve its aspect ration and fit entirely in the box whose dimensions you've specified in style. It will also center the image horizontally and vertically within that box.

However, as far as I can tell, center does the same thing as contain. What's the difference?

RNdev
  • 953
  • 1
  • 8
  • 26

3 Answers3

2

The difference is how the image fits in the Image container. Center: the image will be centered in the image container according to the size of the container. It will have uniform space on left, right and top, bottom sides because the image is centered.

Contain: the image is fitted inside the image container keeping the aspect ratio of the image. This means the image will touch the container walls from either width or height or both depending on which side is larger or smaller.

Container is the Image component itself.

In order to see the differences in action, give background color to the Image component.

See the expo slack to better understand it: https://snack.expo.io/@saadqbal/resizemode

Saadi
  • 1,292
  • 13
  • 22
  • I looked at your Expo example linked, and changing between `contain` and `center` makes no difference. – gkeenley Apr 17 '20 at 20:17
  • When you say about `center` that "there is uniform space on left, right, and top, bottom sides", do you mean that the space on the left is equal to the space on the right, and the space on the top is equal to the bottom, but the left/right space isn't necessarily equal to the top/bottom space? If so, this seems to be the exact same as `contain`. – gkeenley Apr 17 '20 at 20:18
  • 1
    I submitted an edit to improve this answer. The key difference is that `center` will not scale up, but `contain` will scale the image up. – Taylor Kline Nov 15 '21 at 19:15
0

From the official document it says:

center:

Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.

contain:

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

To get the clear idea about it I would suggest a small trick.

Take a view of 50*50 and put image inside it. Now take rectangle(with more height) and square image. See the difference.

Ravi
  • 34,851
  • 21
  • 122
  • 183
  • I tried that and didn't see a difference between the behavior of `contain` and `center`. What's the difference? – gkeenley Apr 17 '20 at 20:20
0

When you use contain it satisfies the following condition

Scale Image Width ≤ Image View Dimension Width
Scale Image Height ≤ Image View Dimension Height

When you use center if image is smaller than the view it will have empty spaces in both x and y directions depending on the image size. If it is larger then ( unless if you specified the scale ) by default it scales down to contain in it ( this is the situation where it appears to be acting similar to contain )

If the image is larger than the view, scale it down uniformly so that it is contained in the view. Documetation

Check this explanation Understanding “resizeMode” in React Native by Mehran Khan

Dami
  • 677
  • 6
  • 12