调整 HTML/CSS 中 table 个单元格的图像大小

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

而且我想将图片放入单元格中。

但是图片比单元格大，他们正在调整 table 的大小而不是调整图像本身的大小。想不通。谢谢你的回答。

Answer 1

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

进一步添加max-height: 100%;以防止法师改变图像的宽高比（为了精确的图像观看体验）

并在 table

中添加全角

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

调整 HTML/CSS 中 table 个单元格的图像大小

Resize images for table cells in HTML/CSS

html

css

resize

image

web