Question

我想显示height而不是图片（图片必须隐藏在每一行）。另一个问题是为图像保留的width空间必须与图像相同，但<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>必须是30px（图像的高度是动态的，所以我不知道它）。如果复选框位于为图像保留的空间的中心，那将是理想的。有可能这样做吗？

Here是示例和代码：

＆＃13;

var

＆＃13;

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>

Answer 2

如果我理解你的问题，你需要一个像这样的CSS规则：

    img {
      position: absolute;
      width: 30px;
      visibility: hidden;
    }

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

显示复选框而不是图像

2 个答案: