Изменение размера изображения для центрирования

Question

У меня есть изображение, похожее на это:

Я пытаюсь сделать квадрат 100х100, а затем центрировать это изображение внутри него.Я могу получить квадрат 100x100 с этим кодом:

import * as React from 'react';
import { View, Image, StyleSheet } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Image
            source={{ uri: 'https://storage.googleapis.com/iex/api/logos/GOOGL.png', }}
            style={styles.image}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  imageContainer: {
    borderWidth: 1
  },
  image: {
    width: 100,
    height: 100
  }
});

export default App;

Однако это обрезает изображение:

IsЕсть ли способ, которым я могу установить ширину / высоту 100x100, но разрешить изменение размера изображения по мере необходимости, чтобы соответствовать и центрироваться внутри квадрата?Спасибо!

Answer 1

Вы пробовали что-то подобное?Его называют resizeMode из React Native.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  imageContainer: {
    borderWidth: 1
  },
  image: {
    width: 100,
    height: 100,
    resizeMode: 'contain'
  }
});

Answer 2

Размеры см. В документе resizeMode и resizeMethod в документе.

Answer 3

Вот ссылка, по моему было очень полезно!является jQuery Image Cente r. Центрирует изображение, перемещая, обрезая и заполняя пробелы внутри его родительского контейнера.Поддерживает соотношение сторон .

http://boxlight.github.com/bl-jquery-image-center