将图像大小调整为居中答案

【问题标题】：Resizing an image to be centered将图像大小调整为居中
【发布时间】：2019-05-21 12:31:47
【问题描述】：

我有这样的图像：

我正在尝试制作一个 100x100 的正方形，然后将该图像居中放置在其中。我可以使用以下代码获得 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;

但是这会切断图像：

有没有一种方法可以设置 100x100 的宽度/高度，但允许图像根据需要调整大小以适合并在正方形内居中？谢谢！

【问题讨论】：

标签： css react-native flexbox react-native-image

【解决方案1】：

resize参见文档中resizeMode和resizeMethod的文档。

【讨论】：

【解决方案2】：

你尝试过这样的事情吗？它在 React Native 中被称为 resizeMode。

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

【讨论】：

我不知道resizeMode，我在文档中不知何故错过了它。非常感谢！
没问题的朋友！

【解决方案3】：

这是一个链接，对我来说非常有用！是 jQuery Image Center。 通过移动、裁剪和填充父容器内的空间来使图像居中。保持纵横比。

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

【讨论】：

我正在使用 react native，所以不能真正使用这样的基于 Web 的库