调整图像在HTML/CSS表格单元格

Question

我有这样的代码：

HTML：

<nav> 
    <table id="menuBar"> 
     <tr> 
      <td> <img src="data/Sources/menu.png"> </td> 
      <td> <img src="data/Sources/home.png"> </td> 
      <td> Files </td> 
      <td> Comments </td> 
     </tr> 
    </table> 
</nav> 

CSS：

nav { 
    text-align: center; 
    height: 100px; 
    width: 100%; 
    padding-left: 25%; 
    padding-right: 25%; 
    background-color: #7F7F7F; 
} 

#menuBar{ 
    padding: 5%; 
} 

#menuBar img{ 
    width: 100%; 
    height: auto; 
    display: block; 
} 

而且我想，以适应图片进入细胞。

但是图片比单元格大，他们调整表格的大小而不是调整图片本身的大小。无法弄清楚。谢谢您的回答。

Answer 1

使用max-width: 100%;代替宽度。

另外添加max-height: 100%;防止法师从改变图像的宽高比（对于精确的图像的观看体验）

，并添加全宽表

#menuBar{ 
    padding: 5%; 
    height:90%; 
    width:90%; 
} 

nav { 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100%; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    background-color: #7F7F7F; 
 
} 
 

 
#menuBar{ 
 
    padding: 5%; 
 
    height:90%; 
 
    width:90%; 
 
} 
 

 
#menuBar img{ 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
}

<nav> 
 
    <table id="menuBar"> 
 
      <tr> 
 
       <td> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </td> 
 
       <td> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </td> 
 
       <td> Files </td> 
 
       <td> Comments </td> 
 
      </tr> 
 
     </table> 
 
</nav>

但会建议在这些情况下使用div，这对于响应香港专业教育学院设计

nav { 
 
    text-align: center; 
 
    height: 100px; 
 
    width: 100%; 
 
    padding-left: 25%; 
 
    padding-right: 25%; 
 
    background-color: #7F7F7F; 
 
} 
 

 
#menuBar{ 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
#menuBar div{ 
 
    float:left; 
 
    height: 100%; 
 
    margin:0 auto; 
 
} 
 

 
#menuBar img{ 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    display: block; 
 
}

<nav> 
 
    <div id="menuBar"> 
 
      <div> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </div> 
 
       <div> <img src="https://i.stack.imgur.com/Cgm7x.jpg?s=328&g=1"> </div> 
 
       <div> Files </div> 
 
       <div> Comments </div> 
 
     </div> 
 
</nav>