Реагируйте на исходное изменение масштаба изображений разных размеров, чтобы вместить контейнер

Question

Наличие большого количества изображений всех разных измерений, поступающих из uri веб-адрес. Я реализовал в виде прокрутки, который показывает несколько карт, каждая из которых имеет изображение, теперь, хотя некоторые изображения отображаются достаточно хорошо, некоторые обрезаются из-за их размеров, и вписываясь в контейнер, я хочу, чтобы все изображение было вписано в указанный контейнер каждой карты без потери какого-либо изображения. Обратите внимание, что каждая карта имеет заданную ширину и высоту, карты не должны быть динамическими.

<View style={Styles.ImageCard.imageCardContainer} onLayout={this.onLayout}>
    <Image
        style={[Styles.ImageCard.imageContainer, { width: this.state.width || '100%', height: this.state.height }]}
        source={{uri: this.props.card.icon}}
        resizeMode={Image.resizeMode.cover}
    />
</View>

ImageCardContainer

imageCardContainer: {
    flex: 1,
    borderWidth: 0.5,
    borderRadius: 15,
    borderColor: Colors.gray.normal,
    elevation: 1,
    shadowOpacity: 0.2,
    shadowOffset: {
      height: 0,
      width: 0,
    },
    marginVertical: 5,
    marginHorizontal: 15,
    overflow: 'hidden',
},

imageContainer

imageContainer: {
    flex: 1,
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    alignSelf: 'center',
    overflow: 'hidden',
},

ImageGetSize

  // Handle on layout to get the width and height of the card.
  onLayout = async event => {
    if (this.state.dimensions) return // layout was already called
    let {width, height} = event.nativeEvent.layout
    this.setState({dimensions: {width, height}})

    // get the image to set the max height width and set the ratio.
    Image.getSize(this.props.card.icon, (srcWidth, srcHeight) => {
        const maxHeight = this.state.dimensions.height; // or something else
        const maxWidth = this.state.dimensions.width;

        const ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
        this.setState({ width: srcWidth * ratio, height: srcHeight * ratio });
        console.log('ratio', ratio);          
      }, error => {
        console.log('error:', error);
      });
  }

Что бы вы предложили, пожалуйста? Неужели на сервере все изображения должны быть масштабированы до фиксированных размеров для этой карты? А как насчет того, где это не сделано, можно ли повторно масштабировать изображения на устройстве?

Большое спасибо за вашу помощь!