CODEWITHSUNDEEP
javascriptcssreact-nativereact-native-image
Harsh Kumar
Harsh Kumar

Reputation: 25

React native image contain

I want to fit an background image with full height and wdith,in contain mode but when i do the image height and width will get half [![i got this result when i user resizemode="contain"][1]][1] But when i use resizemode="cover" then image will cut from side like this [![and in cover mode i got this result][2]][2] [1]: https://i.sstatic.net/2Tni5.jpg [2]: https://i.sstatic.net/R8IJT.jpg I just want something like that image just remain in contain mode with full height and width

        <ImageBackground resizeMode="contain" source={{ uri: "https://www.anime-internet.com/content/images/2022/06/2022-06-07-23_09_28-AnimePahe_Tomodachi_Game_-_10_1080p_SubsPlease.mp4-VLC-media-player-1.jpg" }} style={{ height:"100%",width:"100%" }}>

        </ImageBackground>

Upvotes: 0

Views: 152

Answers (1)

Gaurav Roy
Gaurav Roy

Reputation: 12235

that cant happen . what you need to do is ask the designer to provide an image with the same dimension or aspect ratio.

Suppose you have an image with dimensions 60(height) * 100(width),

Then when you do styles like

<ImageBackground  resizeMode="contain" style={{width:200, height:120}} />

it will work since it fits the aspect ratio.

but height :56 and width :99 will never be able to contain.

so whenver its the same aspect ratio it will worl

Feel free for doubts

Upvotes: 0

Related Questions