html - 显示复选框而不是图像

Question

我想显示 checkbox 而不是图像(图像必须隐藏在每一行中)。另一个问题是图片预留空间的height必须和图片一样，但是width必须是30px(图片的高度是动态的，所以我不知道)。如果复选框位于为图像保留的空间的中心，那将是理想的。可以这样做吗？

Here是示例和代码:

<table>
  <thead>
    <th>Image</th>
  </thead>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
  <tr>
    <td><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></td>
  </tr>
</table>

Answer 1

jsfiddle

CSS

img{
    /*opacity: 0; adjust the opacity to show or hide the img*/
    visibility: hidden;  /* @Marcos Silva */

}
.img_con{
    position: relative;
    width: 30px;
    overflow-x: hidden;
}
input{
    position: absolute;
    left: 0;
    top:0;
    right: 0;
    bottom:0;
    margin: 0 auto;
    margin-top: 100%
}

HTML

<table>
  <thead><th>Image</th></thead>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
  <tr>
    <td><div class="img_con"><img src='http://i.imgur.com/cddKZVx.jpg'><input type='checkbox'></div></td>
  </tr>
</table>