image在鉻中沒有遵守的高度尺寸

Question

我在td中設置了img，width和height設置爲100%。在Chrome中width服從，但height不符合。它似乎在所有其他瀏覽器中按預期工作。

不知道爲什麼？

div 
 
{ 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
table 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
img 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div> 
 
    <table border="1"> 
 
     <tr> 
 
      <td> 
 
       <img src="https://www.google.com/images/srpr/logo11w.png" /> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 1

以供將來參考，我能夠得到它通過在div包裹img工作。

div.one 
 
{ 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
table 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
img 
 
{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="one"> 
 
    <table border="1"> 
 
     <tr> 
 
      <td> 
 
       <div> 
 
        <img src="https://www.google.com/images/srpr/logo11w.png" /> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</div>

Answer 2

，則應該設置最大高度或最大寬度避免內部元件延伸超過outter元件。

HTML

<div> 
    <img src="https://www.google.com/images/srpr/logo11w.png" /> 
</div> 

CSS

div 
{ 
    background-color: red; 
    max-width: 100px; 
    width: 100px; 
    max-height: 100px; 
    height: 100px; 
} 

記住要刪除所有margin和padding表。

Answer 3

問題出在桌子上。該圖像將其高度設置爲其容器的100％，問題在於td從圖像原始高度（190px）獲得高度。我的建議是一起擺脫桌子，只需將圖像放在div中即可完美運行。否則，您需要將td高度設置爲100px。

也許這看起來很接近你想要的東西：http://jsfiddle.net/ericjbasti/kv4zpkuu/6/

div{ 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

div img{ 
    width: 100%; 
    height: 100%; 
    vertical-align:top; 
    border: 4px ridge; 
    box-sizing: border-box; 
}