Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

i used imagesMaxWidth but some of my images can't get windows width

See original GitHub issue

some of my images seems to be largee than my devices screen width here are my codes

 <HTML 
                html={data.content} 
                imagesMaxWidth={Dimensions.get('window').width} 
                tagsStyles={ {a: { fontStyle: 'italic', color: '#039BE5',fontWeight: 'bold' } }}
                baseFontStyle={{fontSize:15}}
                />

Issue Analytics

State:
Created 6 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

6reactions

nsanzumuhirecommented, Feb 15, 2018

@Exilz it would be nice if you show me the pratical good way to use ignoredStyles since am using it like this

<HTML 
                html={data.content} 
                imagesMaxWidth={Dimensions.get('window').width} 
                tagsStyles={{a: { color: '#039BE5',fontWeight: 'bold' } }}
                baseFontStyle={{fontSize:16,fontFamily: 'sans-serif-light',color:'#090f0f'}}
                ignoredStyles={['height','width']} />

4reactions

Exilzcommented, Feb 7, 2018

Okay, so it turns out it’s working fine for my on 3.7.0.

<img src="http://placehold.it/250x250" style="width:125px;height:125px;" />

When using these props :

{ ignoredStyles: ['width', 'height'], imagesMaxWidth: 50 }

width and height styles are properly ignored, and imagesMaxWidth works.

However, if width and height are supplied as html attributes and not as styles, llike this : <img src="http://placehold.it/250x250" style="width:125px;height:125px;" width=125 height=125 />, the image is displayed in 125 by 125 pixels.

This is because ignoredStyles only filters styles in the style property.

I improved ignoredStyles so it also removes all styles added directly through html attributes, too. This should cover all cases.

Top Results From Across the Web

i used imagesMaxWidth but some of my images can't ... - GitHub

width and height styles are properly ignored, and imagesMaxWidth works. However, if width and height are supplied as html attributes and not as ......

How to set imagesMaxWidth when html string already has a ...

Use ignoredStyles prop to ignore width and height of the original pictures. Use ignoredStyles={['height', 'width']} to fix the issue.

Can't resize pictures so that they will fit my desktop.

I am very upset about this. I used to be able to adjust the size and other things about my pictures before I...

Images, max-width, and Mobile - David Walsh Blog

Adding img max-width to all images on mobile devices and print medias, you can ensure that images do not exceed maximum device width....

react-native-render-html-image-resizable - npm

It resizes (and keeps proportions) your images to a maximum width, ensuring that your images won't overflow out of your viewport. A nice...