html - 在 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="/image/Cgm7x.jpg?s=328&g=1"> </td>
                <td> <img src="/image/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="/image/Cgm7x.jpg?s=328&g=1"> </div>
                <div> <img src="/image/Cgm7x.jpg?s=328&g=1"> </div>
                <div> Files </div>
                <div> Comments </div>
        </div>  
</nav>