We are facing image issue with our code in react native application. We have put image in our react native code with Image tag in code. We have set size - height and width of the image to 150, let’s say. Our problem is that when I reduce the height of the image to 100 it crops the image from both top and bottom. While as per our need we want image to be cropped it from only bottom. Below is the sample code and output of the code we have written.
For Example, We have put one image with width and height of 150 as per the below code, and we are getting the output as per the right side of the window. (Image (i) ) ( https://ibb.co/CJjc4SP )
Now, when we set height of the image to 100, it crops the image from both top and bottom. While as per our need we want image to be cropped only from bottom. Please refer below code snippet and output for the same. (Image (ii) ) ( https://ibb.co/FhZ1gxh )
Further explaining the example, Image 1 below is the image that we are using in our code with height 150. When we reduce its height to 100, Image gets cropped from both top and bottom as per the Image 2. While we want output image to be cropped from only bottom as per the Image 3. Please refer below images for the same.
Original Image (1) - ( https://ibb.co/JRzk1T8 )
Cropped output Image (2) - When we reduce image height from 150 to 100, Image gets cropped from both top and bottom as per the image. - ( https://ibb.co/GJkW7PX )
Expected Output Image (3) – While we want image to be cropped only from bottom as per the above image. - ( https://ibb.co/jZkdHhw )
We have multiple images in our project. So please give proper resolution accordingly. - ( https://ibb.co/nPD4JvQ )
Is there any way we can crop image from only bottom when applying reduced size height? Or by applying any other props or attribute?
Kind Regards, Uday
