图像的高度和宽度设置为100％，未在Android浏览器中正确调整大小。

Question

我有以下html：

   <div class="product-view row" data-id="505019">
   <a href="http://dev.shopious.com/items/505019/Kode--A032Bahan--spandex-korea-HQUkuran--fit-to-LRp69000">
      <img class="img-responsive" src="http://distilleryimage4.s3.amazonaws.com/6f1400c6a9cc11e3b5a512abfd23a3f4_6.jpg" data-src="http://distilleryimage4.s3.amazonaws.com/6f1400c6a9cc11e3b5a512abfd23a3f4_6.jpg" width="100%" height="100%">
   </a>
   </div>
</div>

我基本上想要根据容器的宽度和高度调整图像。所以我设置了width="100%" and height="100%"。

这在大多数主流浏览器上都很好用，例如chrome，firefox，opera，甚至是opera mini。

然而，当我在Android浏览器上尝试这个时，它会搞砸。为什么是这样？这是我的网站here的链接。

Answer 1

改为使用style="width:100%; height:100%;"。

在这两种情况下都要确保父元素的大小设置为常量，因为100％应该是100％的东西。如果父元素没有宽度，那么100％的东西仍然没有。

主流浏览器具有默认的用户代理样式，他们可以相应地设置父级大小，因此100％可以工作，我不确定您测试它的移动浏览器是否具有其用户代理样式，但您应该始终做得正确，不依赖于默认样式。