Image alignment when using resizeMode = contains

Question

I use the React Native Image tag to display images with variable width and height. I set the image to 100x50 and set resizeMode = contains, which works almost perfectly, however, if the image is resized, it will be fully centered vertically and horizontally. Can this behavior be changed? Mockup Screenshot:

A red box indicates an image element set to 100x50. The pic laptop presents a variable width / height image. You will notice that the behavior pushes everything in the center either vertically or horizontally.

In the second example, I would like the image to occupy 100% of the height and about half the width that needed to be shifted to the left. Is it possible?

Thanks!

Answer 1

Everything - in order to possibly save some time in the future, this is a quick and dirty method that I decided to solve:

logoSize(width, height) { var maxWidth = 110; var maxHeight = 30; if (width >= height) { var ratio = maxWidth / width; var h = Math.ceil(ratio * height); if (h > maxHeight) { // Too tall, resize var ratio = maxHeight / height; var w = Math.ceil(ratio * width); var ret = { 'width': w, 'height': maxHeight }; } else { var ret = { 'width': maxWidth, 'height': h }; } } else { var ratio = maxHeight / height; var w = Math.ceil(ratio * width); if (w > maxWidth) { var ratio = maxWidth / width; var h = Math.ceil(ratio * height); var ret = { 'width': maxWidth, 'height': h }; } else { var ret = { 'width': w, 'height': maxHeight }; } } return ret; } 

This will take the width and height of the image, skip some correlation calculations and spit out a set of dimensions based on maxWidth and maxHeight vars at the top. Then you can take the dimensions indicated above and apply them to the image element, for example.

 var dims = logoSize(244,127); <Image style={[styles.logo, {width:dims.width, height:dims.height}]} source={{uri:'/path/to/image.png}} /> 

After rounds of calculations, you may need to apply resizeMode: “contain” in styles.logo in your stylesheet.

Hope this helps someone.

Answer 2

This is entirely possible, but do not expect a native reaction to take care of everything. You can write a small algorithm to make this happen. What resizeMode="contain" does is that it checks to see if the image is larger or smaller than the container. If it is larger than the container, it will be resized according to the size of the container. If it is smaller than the container, it will be displayed as is.

As for image alignment, the native reaction doesn't really care. Images are placed in the middle of the container. If you want to put the image to the left, you will need to write a small algorithm that compares the actual image sizes and container sizes.

For example, if the height of the image is larger than the container, set the height of the image equal to the height of the container and calculate the width of the container using the "aspect ratio". Read this to get a clear idea of ​​what you need to do.

Also, play with position: 'absolute' to better suit your needs. Good luck

Edit: Sorry for the lack of a turnkey solution for you. However, you can find the desired algorithm on Google. I just pushed you in the right direction.

Answer 3

I solved a similar problem as follows. First you need to set the initial image styles:

 initialImageStyle : { flex:1, resizeMode:'cover' } 

This will make the image in its original size, which we want to record in a specific onLayout callback. So the trick is to implement this callback as follows:

 onLayout (e) { if (this.state.imageSize) { return } const { x, y, height, width } = e.nativeEvent.layout, sizeX = width - x, sizeY = height - y, imageWidth = (sizeX / sizeY) * IMAGE_HEIGHT this.setState ({ imageSize: { height: IMAGE_HEIGHT, width: imageWidth, resizeMode: 'contain', }}) } 

where IMAGE_HEIGHT is the constant height of your image container. Now all you have to do is just replace the initial image styles using state:

 <Image style={ this.state.imageSize || styles.initialImageStyle } source={ /* your image */ } onLayout={ this.onLayout.bind (this) } /> 

What is it. In your case, you may also need to wrap the image in an additional view. Hope this helps.

Good luck