TD 元素内的图像

Question

我正在用 JavaScript 创建一个表格。

我面临的问题是最后一列的图片 使用过 display=block 和 height=10% 但是这两个图像的大小不同，并且爆炸超出了细胞的正常高度 有什么帮助吗？ 图片链接：https://drive.google.com/open?id=0B-erVHxfjF5MSllSUi1UZWNKeVU

代码：

TD = document.createElement("TD");
TD.style.borderWidth="1px";
TD.style.borderStyle="none none inset none";
TD.style.borderColor="#54514e";
TD.style.textAlign="center";
/*
tForTD=document.createTextNode("submit");
*/
tForTD = document.createElement("IMG");
tForTD.setAttribute("src", "Img/submit_2.png");
tForTD.style.backgroundColor="white";
/*
tForTD.style.position="absolute";
tForTD.style.top="0%";
tForTD.style.display="block";
*/
tForTD.style.height="10%";
tForTD.style.borderRadius="50%";
tForTD.style.filter="grayscale(80%)";
tForTD.style.boxShadow="0px 1px 3px 0px black";
/*
tForTD.onclick=  ( function(index) {
return function() { OnClickAddBill(index); };
} )(i);
*/
TD.appendChild(tForTD);
TR.appendChild(TD);
DBT.appendChild(TR);

Answer 1

为了适合 img inside 块添加一个类，如 img-fit:

.img-fit {
  max-width: 100%;
  max-height: 100%;
}

另外，尝试使用 10vh 而不是 10%：

参考号：https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport

td {
  height: 10vh;
}

.img-fit {
  max-width: 100%;
  max-height: 100%;
}

<table>
  <td><img class="img-fit" src="http://placehold.it/350x350">111</td>
  <td><img class="img-fit" src="http://placehold.it/350x350">222</td>
</table>