IE 및 FireFox의 유체 이미지 (최대 너비)

Question

유동적 인 디자인을하려고하므로 브라우저 창의 크기가 조정되면 이미지의 크기가 줄어 듭니다.

크롬, 사파리, 오페라에서 잘 작동하지만 IE와 FireFox에서는 작동하지 않습니다 (이미지가 전체 크기로 표시되며 이는 페이지 자체 너비보다 훨씬 큽니다) .

일부 사람들은 나에게 너비 : 100 %; 하지만 작은 이미지를 부모 요소의 크기로 크기를 조정합니다.

누군가이 문제에 해결책이 있습니까? 순수한 HTML & CSS, JS가 아니어야합니다.

img { 
    max-width: 100%; 
    height: auto; 
    line-height: 0; 
    border: 0; 
} 

이미지는 기본적으로 div의 내부, 즉 div의 내부에있는 테이블에 있습니다. 이 훨씬 더 많은 공간을 차지 것처럼

하지 실제 코드 (하지만이 방법의 단순화 된 버전) : 것은이

<div class="blabla"> 
    <div class="blablabla" style="max-width: 1110px;"> 
     <table><tr> 
      <td> Text, random, ladida, text 
      <img src="random_source.lol"/></td> 
     </tr></table> 
    </div> 
</div> 

, 나는 필요한 경우,하지 축소 모든 이미지를 wan't 오직 일부.

감사합니다.

추신 : 저는 이미 성공하지 못한 채 이미 많은 주제를 봤습니다.

Answer 1

코드는 브라우저에서 잘 작동합니다. http://jsfiddle.net/abhitalks/mxmzjnaL/1

문제가 테이블에 있습니다 :

이 데모를 참조하십시오. table 및/또는 td 크기를 table에 입력하고 table-layout:fixed;을 입력하십시오. http://jsfiddle.net/abhitalks/mxmzjnaL/2

관련 CSS :

table { 
    table-layout: fixed; 
    width: 50%; 
} 
td { 
    width: 100%; 
} 
img { 
    max-width: 100%; 
    height: auto; 
    line-height: 0; 
    border: 0; 
} 

주 :

이보기 유체를 유지하기 위해 table의 폭에 대한 퍼센트 단위를 사용합니다.

.