CODEWITHSUNDEEP
cssreact-nativeflexboxreact-native-image
inhwrbp
inhwrbp

Reputation: 609

Resizing an image to be centered

I have an image like so:

enter image description here

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:

enter image description here

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!

Upvotes: 0

Views: 1803

Answers (3)

Suresh Tamang
Suresh Tamang

Reputation: 52

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

Upvotes: 0

Ibrahim Reka
Ibrahim Reka

Reputation: 86

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

enter image description here

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

Upvotes: 1

Ricardo Rodriguez
Ricardo Rodriguez

Reputation: 41

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

Upvotes: 0

Related Questions