react-native-html-webview
react-native-html-webview copied to clipboard
Images are not contained in container
I guess images are not responsive.
Do you mean that the auto height doesn't calculate once the images are loaded in? I'm having that issue... if I can specify the height the auto height works but I can't do that for all images. @almost any events we can hook into to update auto height?
I'm loading content via rss so I don't have access to the images.
The auto height thing is relying on the underlying webview to report its content height. Do either of you have time to create a sample project demonstrating the issue? That'd make it much quicker for me to check it out and try and come up with a solution :)
I'm looking at the html source I'm using and the image has a width set to 550
.
Here is the content from one of the rss feeds I'm using that is cause the img to break out of the container.
<div>
<a href=
"http://sailinganarchy.com/wp-content/uploads/2015/06/r2rk.jpg"><img alt=
"r2rk" class="wp-image-49062 alignnone" src=
"http://sailinganarchy.com/wp-content/uploads/2015/06/r2rk-1024x768.jpg"
width="550"></a>
</div>
<div></div>
<p> </p>
<div>
Day #2 is underway after the first cold night of racing during the R2AK! The
start got off slow with very light winds and strong current pulling the fleet
north away from Victoria. The pedal/rowing designs took an early lead with
Team Soggy Beavers being the standout! A light mid afternoon southerly began
to fill and the spinnakers came out, allowing the faster sailboats to
immediately catch up. Team Freeburd went from zeros to heroes, going from
nearly last to the top 5 in a matter of hours. <a href=
"https://www.youtube.com/watch?v=whMXRf2LPJI">Check the start video here</a>!
</div>
<div>
<p>Once the fleet started weaving through the outer islands of the inside
passage, we had to decide how best to follow the fleet. Fiona found a ferry
leaving for salt spring island that we just managed to make, so we headed
over there hoping the fleet would pass by. Luckily they did and we got to
watch the top 5 boats (all multi hulls by this point) trade leads as they
gybed down the straits in light breeze. We deployed the drone and were able
to fly it out about 2 miles to get some of the action! Definitely farthest
from shore we’ve sent one!</p>
<p>By this point the multis were pulling away with Elsie Piddock, a f-25c,
Mob Mentality and Freeburd within minutes of each other rounding out the top
3. We jumped on the next ferry on the north side of salt spring around sunset
and while crossing saw the Soggy Beavers charging up the inside passage past
Vesuvias (photo above).</p>
<p>Word from the Burd brothers is that they felt quick during the night but
hit a floating telephone pole around midnight! Luckily no major damage but
the experience left them weary of each passing wave, so they backed off the
pedal a bit and threw a reef in the main until they could see better. This
morning they pulled into shore to check there was no structural damage and
will be back in the hunt any minute. Elsie Piddock has pulled ahead of the
smaller multis this morning. Watching the tracker it appears many teams are
taking a sleep break or fixing gear. Obvious benefits of having a big boat
and being able to comfortably sleep aboard! All teams approaching Seymour
narrows later today, which will be a huge milestone as it has the strongest
currents of the race. Stay tuned! – Patrick Rynne.</p>
<p> </p>
</div>
I've tried changing the attributes on the img
and nothing seems to work.
You need to add a style for the images with the html.
<style>
img { max-width: 100%; height: auto }
</style>