How to adjust view height according to Image inside

32 Views Asked by At

How do I make sure the image fits perfectly in the container? Width of Image should always be 100% and height of the container should adjust according to the Image. There is a max height for the container (If the image height is more than the container, I will deal with that later, probably while taking the image as input).

I know I am mostly missing something very basic but I can't recall it.

import React from "react";
import { Text, View, StyleSheet, Image } from "react-native";

export default function Post() {
  return (
    <View style={styles.container}>
      <Image
        style={styles.postImage}
        source={{
          uri: "https://images.unsplash.com/photo-1666298888811-b7191e4d935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1914&q=80",
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    maxHeight: 400,
    borderWidth: 1,
  },
  postImage: {
    width: "100%",
    height: "100%",
    resizeMode: "contain",
  },
});

enter image description here

0

There are 0 best solutions below