当复选框在我的表格中时，为什么我的HTML表格会调整图像大小？

Question

这是我的代码：

<style>
  .autoResizeImage {
    max-width: 100%;
    height: auto;
    width: 300px;
  }
</style>

<table>
  <tbody>
    <tr>
      <td style="padding: 10px;"><input type="checkbox" id="checkbox-79" name="79" /></td>
      <td style="padding: 10px;">
        <a href="giftcards/f-Anna.jpg"><img class="autoResizeImage" src="giftcards/f-Anna-thumb.jpg" /></a>
      </td>

      <td style="padding: 10px;"><input type="checkbox" id="checkbox-78" name="78" /></td>
      <td style="padding: 10px;">
        <a href="giftcards/fw2012.jpg"><img class="autoResizeImage" src="giftcards/fw2012-thumb.jpg" /></a>
      </td>

      <td style="padding: 10px;"><input type="checkbox" id="checkbox-77" name="77" /></td>
      <td style="padding: 10px;">
        <a href="giftcards/austin.jpg"><img class="autoResizeImage" src="giftcards/austin-thumb.jpg" /></a>
      </td>

      <td style="padding: 10px;"><input type="checkbox" id="checkbox-76" name="76" /></td>
      <td style="padding: 10px;">
        <a href="giftcards/jake.jpg"><img class="autoResizeImage" src="giftcards/jake-thumb.jpg" /></a>
      </td>
    </tr>
  </tbody>
</table>

当我包含复选框时，图像会逐渐变小：

here

当我删除复选框单元格时，图像看起来很好：

如果图像需要缩小，我希望它们都缩小相同的量，以便它们的高度仍然匹配。如何修改我的CSS以解决此复选框问题？

Answer 1

在构建表格时，它不知道要为复选框单元格分配多少宽度，因此在添加每个复选框单元格时，图像剩余的可用宽度会越来越少。为每个复选框单元格指定静态宽度将解决问题：

＆＃13;

＆＃13;

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: 300px;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td style="padding: 10px; width: 20px;"><input type="checkbox" id="checkbox-79" name="79" /></td>
            <td style="padding: 10px;"><a href="giftcards/f-Anna.jpg"><img class="autoResizeImage" src="https://www.wehoville.com/wp-content/uploads/2017/03/pygmy-goat.jpg" /></a></td>

            <td style="padding: 10px; width: 20px;"><input type="checkbox" id="checkbox-78" name="78" /></td>
            <td style="padding: 10px;"><a href="giftcards/fw2012.jpg"><img class="autoResizeImage" src="https://www.wehoville.com/wp-content/uploads/2017/03/pygmy-goat.jpg" /></a></td>

            <td style="padding: 10px; width: 20px;"><input type="checkbox" id="checkbox-77" name="77" /></td>
            <td style="padding: 10px;"><a href="giftcards/austin.jpg"><img class="autoResizeImage" src="https://www.wehoville.com/wp-content/uploads/2017/03/pygmy-goat.jpg" /></a></td>

            <td style="padding: 10px; width: 20px;"><input type="checkbox" id="checkbox-76" name="76" /></td>
            <td style="padding: 10px;"><a href="giftcards/jake.jpg"><img class="autoResizeImage" src="https://www.wehoville.com/wp-content/uploads/2017/03/pygmy-goat.jpg" /></a></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如果检查代码示例中每个图像的计算样式，您会看到每个图像的宽度都设置为100％，但是＆＃34; 100％＆＃34;由于上述原因，每添加td会变得越来越少。