search

jsdf / react-native-htmlview

A React Native component which renders HTML content as native views
ISC License
2.72k stars 466 forks source link

Style for responsive image. #230

Open tkserver opened 6 years ago

tkserver commented 6 years ago

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 commented 6 years ago

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

leeleoo commented 6 years ago

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 commented 5 years ago

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 commented 7 months ago

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 ??