Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

resizeMode=“contain” takes up space of the original image

See original GitHub issue

Description

The style below correctly resizes the image. However, it takes up the space of the original image and the resized image is center aligned. I’ve added the backgroundColor to make it easier to visualize the screenshot attached.

image: {
  width: '100%',
  resizeMode: 'contain',
  backgroundColor: 'black',
},

React Native version:

0.61

Expected Results

I’m expecting the “resized image” to take up the size of the resized image

Screenshot:

Screenshot for Stack Overflow

Issue Analytics

State:
Created 3 years ago
Reactions:5
Comments:10

Top GitHub Comments

2reactions

ahtierneycommented, Aug 5, 2020

@chrisglein I believe I’ve updated the snack you’ve provided to demonstrate @alishehzad2017’s issue: https://snack.expo.io/FbQZQbcVO

From my understanding, the expectation is that “contain” would preserve the aspect ratio, take 100% width, and adjust the height of the image container so it mirrors the height of the rendered image – without specifically setting a height style.

0reactions

wouterh-devcommented, Dec 7, 2022

This issue is still present in the latest react native. The expectation is that images should be resized according to their aspect ratio without additional padding/margins.

Top Results From Across the Web

resizeMode contain showing space before and after image in ...

resizeMode="contain " is Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image ...

Understanding “resizeMode” in React Native | by Mehran Khan

2 ) “contain” : Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image...

resizeMode=“contain” takes up space of the original image

I am trying to render an Image as below. The style below correctly resizes the image. However, it takes…

CSS object-fit Property - W3Schools

This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up...

[Solved]-react native image contain empty space-React Native

<Image source={{ uri: downloadDest, scale: 1 }} style={styles.image} > </Image> image: { flex: 1, resizeMode: 'cover', //or stretch/contain backgroundColor: ...