how can we style/scale the image displayed by <S3Image> component for React ?

At the moment when I add the <S3Image> component with the following props: <S3Image imgKey={"somekey"} picker />

–> the image is displayed “as-is” (which can be MASSIVE in scale if image is large) and setting a style prop on the S3Image component didn’t seem to do anything. Nor did nesting the S3Image component inside a <div> and setting a style on that div.

How can we scale / resize the displayed image for this component ? Is there a different prop ?

Also why is nothing displayed in the large rectangle that houses the camera icon ? Is a massive waste of space/screen real estate. My suggestion is to let the user HIDE both the title section and that camera section via props. Then you’d have a nice clean display with a button to select, and a preview image that can be styled (per above; plus, perhaps set border radius to make into circle etc)

[RobertBrewitz]

Here’s the actual img style prop: https://github.com/aws-amplify/amplify-js/blob/7e07ebe66e9957c01c4d1fee190b48a2f33fff89/packages/aws-amplify-react/src/Storage/S3Image.js#L131

So probably <S3Image theme={{ photoImg: { width: '300px', height: '300px' } }} />

theme.photo seems to be the wrapper div styles around img theme.photoImg seems to be the img styles style overrides theme.photo

[jeremysandor]

Thank you for diving in @RobertBrewitz

<S3Image theme={{ photoImg: { width: '300px', height: '300px' } }} />

did the trick