Почему моя 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>

Когда я включаю флажок, изображения постепенно уменьшаются:

Когда я снимаю флажки, изображения выглядят просто отлично:

Если изображения нужно сжимать, я бы хотел, чтобы все они сжимались в одинаковом размере, чтобы их высоты все равно совпадали. Как я могу изменить свой CSS, чтобы исправить эту проблему флажка?

Answer 1

Когда таблица строится, она не знает, какую ширину выделить для ячеек флажков, поэтому при добавлении каждой ячейки флажка доступная ширина, оставленная для изображений, становится все меньше и меньше. Назначение статической ширины для каждой ячейки флажка решит проблему:

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

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

Если вы изучите вычисленные стили для каждого изображения в вашем примере кода, вы увидите, что для каждого изображения установлена ​​ширина 100%, но «100%» становится все меньше и меньше, когда каждое td добавляется для причины, упомянутые выше.