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中出现：表格占屏幕高度的10％，表格中的图像会调整其大小。

我的解决方案似乎很糟糕，仅适用于Firefox。如何以正确的方式存档？（具有10％屏幕高度的绝对表和适应此高度的图像）

Answer 1

我认为您需要以像素计算10％的高度

使用Jquery的示例

map.forEach((key, value) -> {
  // do whatever with key and value
});

在td中包含您的图片

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

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

<强>演示

https://jsfiddle.net/qy0gz2s6/

具有相对高度和图像的绝对表格

1 个答案: