绝对 table 具有相对高度和内部图像

Question

我有以下代码

table.charinfo {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  background-color: red;
  height: 10%;
  width: 40%;
}
table.charinfo tbody {
  height: 100%;
}
table.charinfo tbody td {
  height: 100%;
  vertical-align: top;
}
table.charinfo tbody td.charimage img {
  height: 100%;
}

<table class="charinfo">
  <tbody>
    <tr>
      <td class="charimage">
        <img src='avatar.png' />
      </td>
    </tr>
  </tbody>
</table>

它只在 Firefox 中有效：table 有 10% 的屏幕高度，table 中的图像会调整它的大小。

我的解决方案似乎很糟糕并且只能在 Firefox 中运行。我怎样才能以正确的方式存档呢？（绝对值 table，屏幕高度为 10%，图像适应该高度）

Answer 1

我认为您需要以像素为单位计算 10% 的高度

示例使用 Jquery

var height = $(window).height();
var tdheight = height / 10;
$(".charimage").css("height", tdheight+"px");

在 td 中包含您的图片

 img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    display:block;
    top: 0; left: 0; bottom: 0; right: 0;
    overflow:hidden;
}

如果你不想让图像居中，你可以使用浮动（左，右）或边距来定位图像

演示

https://jsfiddle.net/qy0gz2s6/

绝对 table 具有相对高度和内部图像

Absolute table with relative height and image inside

html

html-table