Android 브라우저에서 이미지의 높이 및 너비가 100 %로 올바르게 조정되지 않았습니다.

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%"으로 설정했습니다.

크롬, 파이어 폭스, 오페라, 오페라 미니와 같은 대부분의 주요 브라우저에서 정상적으로 작동합니다.

그러나 이것을 Android 브라우저에서 시도하면 엉망입니다. 왜 이런거야? 다음은 내 웹 사이트 here에 대한 링크입니다.

Answer 1

style="width:100%; height:100%;"을 대신 사용하십시오.

모두 100 %가 무언가의 100 %이기 때문에 부모 요소의 크기가 고정되어 있는지 확인하십시오. 상위 요소에 너비가없는 경우 아무 것도없는 요소가 100 %입니다.

주요 브라우저는 기본 사용자 에이전트 스타일을 가지고 있기 때문에 부모 크기를 스스로 설정할 수 있으므로 100 %가 작동합니다. 테스트 한 모바일 브라우저에 사용자 에이전트 스타일이 포함되어 있는지 확실하지 않지만 항상 올바르게하고 기본 스타일에 의존하지 마십시오.