在CSS中，我們可以使用多種方法來控制表格中的圖片大小，以下是一些常用的方法：

1、使用width和height屬性：

- 通過設置width和height屬性，我們可以直接指定圖片的寬度和高度。width: 100px; height: 100px;會將圖片的大小設置為100像素寬和100像素高。

2、使用max-width和max-height屬性：

- 這些屬性允許圖片在其容器內自由縮放，但不超過指定的***大寬度和高度。max-width: 100px; max-height: 100px;會確保圖片不會超過100像素寬和100像素高。

3、使用object-fit屬性：

object-fit屬性用于控制圖片在容器內的填充方式。object-fit: cover;會使圖片完全覆蓋容器，但可能會裁剪一部分圖片。

4、使用border-box單位：

- 通過設置box-sizing: border-box;，我們可以使圖片的寬度和高度包含邊框和填充，這對于確保表格布局的一致性很有用。

5、響應式設計：

- 在響應式設計中，我們可以使用媒體查詢來根據(jù)屏幕大小調整圖片的大小。@media (max-width: 600px) { ... }可以在屏幕寬度小于600像素時應用不同的樣式。

6、使用CSS變量：

- 通過定義CSS變量（如--image-size），我們可以更靈活地控制圖片的大小，并在需要時輕松調整。

示例代碼

下面是一個示例CSS代碼，展示了如何控制表格中的圖片大小：

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  padding: 10px;
}
img {
  width: 100px; /* 直接設置圖片寬度 */
  height: auto; /* 高度自動縮放 */
}
@media (max-width: 600px) {
  img {
    width: 50px; /* 在小屏幕上減小圖片寬度 */
    height: auto;
  }
}

HTML結構示例

<table>
  <tr>
    <td>
      <img src="path_to_image.jpg" alt="描述圖片">
    </td>
    <td>
      更多內容...
    </td>
  </tr>
  <!-- 更多行數(shù)據(jù) -->
</table>

通過結合CSS和HTML，您可以輕松地控制表格中的圖片大小，并確保在各種屏幕尺寸和設備上都能提供一致的體驗。