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符合块，请添加类img-fit：

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

TD元素内的图像

1 个答案: