Resizing an image to be centered

Question

I have an image like so:

I am trying to make a 100x100 square and then centering that image inside it. I am able to get the 100x100 square with this code:

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;

However that cuts off the image:

Is there a way I can set a 100x100 width/height, but allow the image to resize as necessary to fit and be centered inside the square? Thanks!

score 1 · Accepted Answer · answered Dec 21 '18 at 01:26

1

Have you tried something like this? Its called resizeMode from React Native.

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

answered Dec 21 '18 at 01:26

Ibrahim Reka

86
5

1

I had no idea about `resizeMode`, I somehow missed it in the docs. Thanks so much! – inhwrbp Dec 21 '18 at 01:27
No problem mate! – Ibrahim Reka Dec 21 '18 at 01:28

score 0 · Answer 2 · answered Dec 21 '18 at 01:25

0

Here is a link, for my has been very useful! is the jQuery Image Center. Centers an image by moving, cropping and filling spaces inside its parent container. Maintains aspect ratio.

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

answered Dec 21 '18 at 01:25

Ricardo Rodriguez

41
1
4

I'm using react native, so can't really use a web based library like this – inhwrbp Dec 21 '18 at 01:26

score 0 · Answer 3 · answered Dec 21 '18 at 01:56

0

For resize see the doc of resizeMode and resizeMethod in doc.

answered Dec 21 '18 at 01:56

Suresh Tamang

42
1
9

Resizing an image to be centered

3 Answers3