Image's height and width set to 100% not resizing properly in Android Browser.

Question

I have the following 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>

I wanted essentially the image to adjust according to the width and height of the container. So I've set width="100%" and height="100%" .

This works all fine on most major browsers such as chrome, firefox, opera, and even opera mini.

However when I tried this on an android browser, it messes up. Why is this? Here is the link to my website here .

Answer 1

use style="width:100%; height:100%;" instead.

in both cases make sure the parent element has constant size set, because 100% is supposed to be 100% of something. if parent element has no width, then 100% of nothing is still nothing.

major browsers have default user-agent styles, they can set parent size accordingly on their own therefore the 100% would work, im not sure if the mobile browser you tested it on has its user-agent styling, but you should always do it correctly and not rely on default styling.