Some image sizes not working

First of all, thank you for this repo, it is by far the best html renderer for React Native that I’ve tried.

The problem I’m having is that not all images are being sized correctly. I’m using the Dimensions.get('window').width trick but some images are rendered at full size and spill off the screen. I’m not sure exactly what the cause is but it seems to only apply to images who have their sizes specified in this format: sizes: "(max-width: 100px) 100vw, 603px"

I’m building a rss feed reader using the Feedly API so I’ve been noting which feeds give me problems with their images and they all have that sizing format in common. Some examples of the feeds that do this:

https://postsecret.com/ https://waitbutwhy.com/ http://www.poorlydrawnlines.com/

Here’s a screencap of the debug output when the screen is rendered:

And the html I’m rendering look like this:

<p>
  <img sizes="(max-width: 700px) 100vw, 700px" src="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png"
    alt="" width="700" srcset="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png 700w, http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist-300x264.png 300w"
    class="wp-image-6468" height="615">
</p>

I’m sure I didn’t do a great job explaining all this but I’m happy to provide any additional information needed to figure this out.

[Exilz]

I improved the iframe renderer in 3.5.0. It’s not perfect, but at least, iframes cannot be rendered with a width superior to your device’s viewport. That’s a little better, but for advanced usage you’ll need to write your own renderer.

Feel free to re open another issue if your image rendering problem actually comes from this plugin.

[Exilz]

Hi @chadmorrow, thanks for the kind words !

As documented in the README :

Please note that if you set width AND height through any mean of styling, imagesMaxWidth will be ignored.

In your example with the ghost comic, you do have height and width, so imagesMaxWidth isn’t doing anything.

It resizes properly as long as I remove them

I’m not sure what’s the best in your situation, because I guess you can’t make sure these attributes aren’t in your HTML. Well, you could use alterChildren to remove them but it feels like hacking. I really think height and width should override anything if they’re supplied. Please tell me if you have some ideas to resolve this.

Regarding your other issue, at the moment, there is no behavior regarding <iframe> to make sure it’s not rendered off-screen, it depends on height and width attributes, or defaults to 200x200, which is kinda terrible I guess.

It would be nice to add a fallback depending on the width of the screen instead of a static value.