I am trying to figure out how to precisely position an image in a container in React Native.
Right now I have what is on the left, and I would like to be able to position the image like the example on the right. (and not justifying center as the part of the image I want to show is not necessarily the center of the image)
To be more clear what I want is to be able to re-position the part of the image that is showing. (ie: move it to the right but keeping it only taking up the same space)
and here is a snack:snack.expo.io
As far as I understand, what you are looking for is resizeMode property.
resizeMode = "cover"
Scale the image uniformly so that both
dimensions of the image will be equal to or larger than the
corresponding dimension of the view.
Try this. Note that I added resizeMode="cover".
<Image style={styles.image} resizeMode="cover" source={{uri: 'https://www.gstatic.com/webp/gallery/1.jpg'}} />
So... I did find that I can get the result I want if I add:
width: '170%'
image:{
flex: 1,
height: '100%',
width: '170%'
},
My assumption would be that this would stretch the image out but it just seems to re-position it. I am not sure why this behaves this way. I would think that there would be a better way to approach this problem but I haven't found anything.
Related
I built an iOS app with React Native. I used Expo to build it. In dev mode, I have an image that I manipulate and it works as expected. In production mode the image is zoomed in and cut off. Here is the code:
<Image
source={require("../assets/Logo.png")}
resizeMode={"center"}
style={{
resizeMode: "center",
transform: [{ scale: 0.8 }],
width: 250,
height: 75,
}}
/>
The reason I have both the resizeMode prop and the style is because it wasn't working earlier so I just added both in hopes that one of them would work. Please let me know if you know what the problem might be. Thanks.
There is the issue with center resize mode in iOS, see the issue for details.
Use contain instead, which is probably the right approach anyway in this case.
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).
See all options for resize mode.
I hope there is someone savvy with React Native that can help me out here.
I want to resize an image according to the dimensions of the view that it is placed in. To my understanding that should be achievable by using "ResizeMode: Contain" as a style on the image. That should cause the image to rescale itself to fit within the surrounding view, iff it is too large (according to my understanding) .
I have attached an image that shows the dimensions of the view (the blue bordered view). The dimensions of the views are correct according to the blue border on the view, yet the image is not resized to fit it.
Can someone figure out, what it is that I am doing wrong here, or have I encountered a bug in the framework? (It is a fairly new framework I suppose, so that could actually happen I guess).
If it helps, then I am currently using the following React Native version:
react-native: 0.54.4
(and react-native-cli: 2.0.1 for what it is worth).
Picture of issue (notice the blue box and the wrongly scaled image within it):
resizeMode should be used as a prop instead of a property of the style object
<Image
style={{ ... }}
source={{ ... }}
resizeMode='contain'
/>
When I display my images in the horizontal scroll-view with paging enabled the performance of app decreases. I know it is due to high resolution of the image. I want a good way so that I can load image with out degrading it's quality.
Thank you in advance.
First, using a FlatList instead of a scroll view will probably improve performance, since off-screen images will not be rendered.
Second, using images with resolution that is greater than the screen is just wasteful, since they will get resized anyway. You can pre-compute several sizes and use the most appropriate one computing the actual screen resolution using PixelRatio
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
See the PixelRatio documentation for more detailed on fetching an appropriate size image.
My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
I'm building a responsive site using WordPress, and images are automatically set to height:100%; width:auto; and the div resizes according to window size. But this often means some images have their height set to higher than their actual height causing pixelation. What i need is something like height: 100%; width:auto; max-height:"image height here". How, if this is possible, is this possible?
The page where this is an issue is here: http://wheretoimmigrate.com/onthemouse/?portfolio=atomic-clothings-2012-campaign
I resolved it by simply making the images larger by adding a transparent background of larger size and different proportions. Tricked the system into treating it like a larger image. Worked perfectly.