调整 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%;
}

#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;
}

但建议在这些情况下使用 div，它最适合响应式设计

<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>

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;
}