Resized image contains padding

[szmarczak]

Description

The following code:

import {View, Image} from 'react-native';

const DisplayAnImage = () => {
  return (
    <View style={{ width: 200, height: 100, backgroundColor: 'gray', }}>
        <Image
          style={{ maxWidth: '100%', maxHeight: '100%', resizeMode: 'contain', opacity: 0.5, backgroundColor: 'red' }}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
    </View>
  );
};

export default DisplayAnImage;

results in:

The equivalent in HTML:

    <div style="width: 200px; height: 100px; background-color: gray;">
      <img src="https://snack-web-player.s3.us-west-1.amazonaws.com/v2/48/assets/src/react-native-logo.png" style="max-width: 100%; max-height: 100%; background-color: red" />
    </div>

results in:

I want to get rid of the huge red padding visible in the react-native code.

React Native Version

0.72.5

Output of npx react-native info

>npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.22621
  CPU: "(12) x64 AMD Ryzen 5 5600 6-Core Processor              "
  Memory: 17.12 GB / 31.91 GB
Binaries:
  Node:
    version: 20.2.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-222.4459.24.2221.9971841
  Visual Studio:
    - 17.5.33424.131 (Visual Studio Community 2022)
Languages:
  Java:
    version: 11.0.20.1
    path: C:\Program Files\Eclipse Adoptium\jdk-11.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

Code attached above.

Snack, screenshot, or link to a repository

Screenshots attached above.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[frankcalise]

Set your maxWidth to 50%

[szmarczak]

Set your maxWidth to 50%

I don't know the actual size of the image. it may be 50% it may be 75%.

[Fernando-Albiero]

I think it happens because u didn't define your Image component size, so it follows the View parent size 200x100. When you specify the resizeMode as 'contains' it will resize your image to fit into this View size, that's why the red padding appears. You can try to define the size of your image directly on the Image component. Note that these props maxWidth and maxHeight that you are using are not image style props, so they are useless. There is not problem if u dont know the size of the Image, you can define the size of the Image container and resize the image you are getting from anywhere to fit into it. I hope it solves your problem!

[szmarczak]

Thanks for reply @Fernando-Albiero!

I think it happens because u didn't define your Image component size, so it follows the View parent size 200x100. When you specify the resizeMode as 'contains' it will resize your image to fit into this View size, that's why the red padding appears.

I think you're right. It behaves exactly like a View disregarding the actual image size aspect ratio, so there's a need to manually set it.

Note that these props maxWidth and maxHeight that you are using are not image style props, so they are useless.

Image inherits View: https://reactnative.dev/docs/image#props

The issue is, I expect it to behave exactly like the HTML <img> tag. It should automatically inherit the aspect ratio of the image if not defined. I looked around in the internet and people wrote custom components that fetched the aspect ratio prior to rendering. But that causes delay.

[Fernando-Albiero]

Hi @szmarczak!

Sorry for the delay to respond you.

Image inherits View: https://reactnative.dev/docs/image#props

You're right about this, i forgot this detail. Sorry for the mistake.

The issue is, I expect it to behave exactly like the HTML tag. It should automatically inherit the aspect ratio of the image if not defined.

To do this you normally use the Image prop aspectRatio: 1 with one of the width/height set as auto. You can see more details here: https://reactnative.dev/docs/layout-props#aspectratio and here: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.

[iain-neirfeno]

Setting the aspectRatio: 1 assumes you know the aspect ratio of the source image