使用 jQuery 将图像适合表格单元格答案

【问题标题】：Fit image to table cell using jQuery使用 jQuery 将图像适合表格单元格
【发布时间】：2023-03-28 23:42:01
【问题描述】：

我在做实验时遇到了这个问题。所以我正在做的是有一个表格，当我单击一个按钮时，它会将图像附加到表格中的某些特定单元格。但是，每次出现图像时，表格都会变形（您可以在下面的附图中看到）。显示：块不起作用。我尝试将 display:block 添加到 css 中的 img 标签作为默认值，但它也没有工作。

Image

这是我添加图片的代码：

$("table").find("tr").eq(1).find("td").eq(1).append("<img src='image.png' style='display:block;' width='100%' height='auto'/>");

这是我的表格css（框是表格的id）：

#box {
        height: 400px; 
        width: 400px;
        position: fixed;
        margin-left: -200px;
        margin-top: -200px;
        top: 50%;
        left: 50%;
    }

有人知道如何解决这个问题吗？谢谢。

【问题讨论】：

你能不能加一些html，把所有代码放到sn-p里
您的代码仅适用于一行，不适用于其他行。
在CSS 中尝试overflow:hidden。也是style='display:block;width:100%;height:auto'/> 为什么要block？
.eq(1) 总是表示第一行/单元格
这只是为了说明我在做什么

标签： jquery css image cell

【解决方案1】：

您需要为表格单元格提供固定的宽度和高度，以便在添加图像时不会失真。

function addImage() {
  $("table").find("tr").eq(1).find("td").eq(1).append("<img src='https://kbob.github.io/images/sample-5.jpg' style='display:block;' width='100%' height='auto'/>");
}

table img {
  width: 200px;
}
table td {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>  
</table>
<button onClick='addImage()'>Click</button>

试试这个，如果这是您的要求，请告诉我。

【讨论】：

【解决方案2】：

如果您想保持所有表格单元格的尺寸不变，那么您必须这样做，

将恒定宽度和高度设置为全部 td（或）
为每个设置了宽度和高度的 td 添加新的图像 div 容器

表格扭曲的原因是，由于没有为表格单元格设置尺寸，因此附加图像的行和列保留了高度和宽度，而其他没有数据的行和列变得很小

【讨论】：

谢谢。我明白了。