Image rendering wrong only on some browsers on mobile

I have a non-square image on my bootstrap-based website (blog) in a column next to a column of text. It's set up so they are left-right if there is enough room and stack if there isn't. Everything looks great on chrome, firefox, and even IE on desktop. Chrome works fine on mobile, but if I use the facebook browser or the default Samsung 'Internet' browser, the picture because very distorted. I actually had to put a <br> after the picture just so it wouldn't cover some of the text below on the messed-up browsers. Pics below:

<div class="row">
  <div class="col-xs-12 col-md-6">
</div>
<div class="img-lg col-xs-12 col-md-6" style="pull-right">
  <a class="popup" href="/data/dp_main1.png">
    <img src="/data/dp_main1.png"> 
  </a>
</div>

The .img-lg class is

.img-lg {
  height:100%;
  width:100%;
  max-height:340px;
  max-width:360px;
}

I've tried with the height,width values commented out and nothing changes.

Here is how it looks on facebook's in-app browser and samsungs internet, and possibly safari (I don't have it so I haven't checked):

Here is how it looks on chrome/firefox/etc: