almost / react-native-html-webview

Display HTML in a UIWebView, optionally sanitizing it first
MIT License
105 stars 20 forks source link

Images are not contained in container #5

Open cgarvis opened 9 years ago

cgarvis commented 9 years ago

I guess images are not responsive.

Benmidi commented 9 years ago

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?

cgarvis commented 9 years ago

I'm loading content via rss so I don't have access to the images.

almost commented 9 years ago

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 :)

cgarvis commented 9 years ago

I'm looking at the html source I'm using and the image has a width set to 550.

cgarvis commented 9 years ago

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>&nbsp;</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&#8217;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! &#8211; Patrick Rynne.</p>

  <p>&nbsp;</p>
</div>
cgarvis commented 9 years ago

I've tried changing the attributes on the img and nothing seems to work.

midudev commented 9 years ago

You need to add a style for the images with the html.

<style>
    img { max-width: 100%; height: auto }
</style>