Style for responsive image.

[tkserver]

I have an issue with images. I want to use a "responsive" view of the images which is essentially like this: const styles = StyleSheet.create({ img: { maxWidth: '100%', height: 'auto' } });

This above does not work.

I can add width and height attributes to the tag, but the problem with that is I don't know the dimensions of the image. The image might be portrait, landscape, square etc. So scaling with fixed values will certainly mess up the image dimensions.

[tkserver]

Bumping this since it has been 3 months and no response.

[leeleoo]

Create a new component and get the width and height in his life cycle like this

Image.getSize(this.props.url, (width, height) => { this.setState({ width, height }) }, (err) => { console.log('err', err) })

[tkserver]

Thanks for the response @leeleoo but how can I do that when the image is in an image tag within a large block of HTML being rendered?

[4mit]

how do we select a class and how do we define various selectors in stylesheet or style ??

<div class='main-container'>
          <div class='privacy-policy'><p>To view our privacy policy, scan the QR code below or visit https://abc.com/privacy-policy.</p></div>
      </div>

how do we select main-container here ??