图像呈现仅在移动设备上的某些浏览器上有误

Question

我在基于引导程序的网站（博客）上的一列文本旁边的列中有一个非方形图像。如果没有足够的空间和堆叠，它设置为左右。 Chrome桌面上的chrome，firefox甚至是IE都看起来很棒。 Chrome在手机上运行良好，但如果我使用的是Facebook浏览器或默认的三星'互联网'浏览器，那么图片就会非常扭曲。我实际上不得不在图片之后添加一个<br>，因此它不会覆盖下面的一些文本在混乱的浏览器上。图片如下：

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

.img-lg类是

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

我已尝试将高度，宽度值注释掉，但没有任何变化。

以下是它在facebook的应用程序内浏览器和samsungs互联网上的外观，以及可能的safari（我没有它所以我没有检查过）：

以下是它在chrome / firefox / etc上的外观：