时间戳

首页 > 解决方案 > 图片属性高度：100% 不起作用

html - 图片属性高度：100% 不起作用

问题描述

我有一个包含 9 个单元格的表格，所有单元格都像井字棋盘一样分布。我想在其中一个单元格（左上角）中显示图像，所以我编写了以下代码-

td {
   border: 2px solid black;
   width: 33%;
   height: 33%;
   padding: 0px;
}

td img {
   width: 100%;
   height: auto;
   padding: 0px;
}
<table style="width: 400px; height: 400px; margin: auto">
   <tr>
      <td id="box0"><img src="https://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/010/323/original/00D7-500x500.png?1275328364" alt=""></td>
      <td id="box1"></td>
      <td id="box2"></td>
   </tr>
   <tr>
      <td id="box3"></td>
      <td id="box4"></td>
      <td id="box5"></td>
   </tr>
   <tr>
      <td id="box6"></td>
      <td id="box7"></td>
      <td id="box8"></td>
   </tr>
</table>

在样式标签中，我将 td 高度设为 33%。我希望它只占桌子整个高度的 1/3。现在，在 td 标签内，我放置了一个图像并将其高度设置为 100%。我希望它覆盖整个表格单元格而不改变表格单元格的大小。因此，它的高度应该等于其父级高度的 100%。但是如果我将图像高度设置为 100%，它只会覆盖其父单元格的完整列，而图像父单元格下方的其他两个单元格将缩小为线条。

简而言之，即使高度设置为 100%，图像也​​会覆盖整个列。只有当我将其高度设置为自动时，它才会将自己限制在其父表格单元格中。但是height:auto应该表示图片的高度是默认的，而height:100%应该表示图片应该限制在其父单元格内？为什么会发生相反的情况？

标签： htmlcss

解决方案

推荐阅读