Got it, let's solve this image cropping issue you're facing. When you shrink the Image component's height from 150 to 100, the default behavior centers the image and crops equally from top and bottom—but you want to keep the top portion intact and only trim the bottom. Here are a few straightforward, reliable solutions:

Option 1: Container with Overflow + Absolute Positioning #

This is the most intuitive approach for fixed-size images. Wrap your Image in a container that defines your desired dimensions, then position the image to stick to the top of the container. Any excess from the bottom gets clipped by the container's overflow setting.

import { View, Image } from 'react-native';

// In your component
<View style={{ width: 150, height: 100, overflow: 'hidden' }}>
  <Image
    source={{ uri: 'your-image-uri' }} // Or require('./local-image.png')
    style={{ width: 150, height: 150, position: 'absolute', top: 0 }}
  />
</View>

How it works: The container locks in your 150x100 display area. The image keeps its original 150x150 size, aligns to the top of the container, and any part of the image below the container's bottom edge gets hidden automatically.

Option 2: Transform TranslateY for Dynamic Adjustments #

If you prefer not to use a wrapper container, you can adjust the image's position directly using a translateY transform. This is great if you need to calculate offsets dynamically (like for images with varying original heights).

import { Image } from 'react-native';

// For fixed original height (150)
<Image
  source={{ uri: 'your-image-uri' }}
  style={{
    width: 150,
    height: 100,
    resizeMode: 'cover',
    // Shift image up by half the cropped height: (150-100)/2 = 25
    transform: [{ translateY: -25 }],
  }}
/>

Dynamic version for variable image heights:
If you're dealing with multiple images of different sizes, use the onLoad callback to get the original image dimensions and calculate the offset automatically:

import { Image, useState } from 'react-native';

function BottomCroppedImage() {
  const [topOffset, setTopOffset] = useState(0);
  const targetHeight = 100;
  const targetWidth = 150;

  return (
    <Image
      source={{ uri: 'your-image-uri' }}
      style={{
        width: targetWidth,
        height: targetHeight,
        resizeMode: 'cover',
        transform: [{ translateY: topOffset }],
      }}
      onLoad={(event) => {
        const { height: originalHeight } = event.nativeEvent.source;
        // Only shift up if the original image is taller than our target height
        if (originalHeight > targetHeight) {
          setTopOffset(-(originalHeight - targetHeight) / 2);
        } else {
          setTopOffset(0);
        }
      }}
    />
  );
}

Option 3: ImageBackground for Overlay Content #

If you need to place text or other components on top of the image, use ImageBackground instead. The approach is nearly identical to Option 1, but you can add child elements inside the background:

import { ImageBackground } from 'react-native';

<ImageBackground
  source={{ uri: 'your-image-uri' }}
  style={{ width: 150, height: 100, overflow: 'hidden' }}
  imageStyle={{ width: 150, height: 150, position: 'absolute', top: 0 }}
>
  {/* Add any overlay content here, like text or buttons */}
</ImageBackground>

All these methods will ensure your images are cropped only from the bottom, keeping the top section fully visible—perfect for handling multiple images in your project.

内容的提问来源于stack exchange，提问作者Kandarp Dave