这是一个相对简单的问题，但我在DataTable文档和StackOverflow上均未找到解决方案。我试图让图片完全填充jQuery DataTable的单元格，具体来说是让图片占据截图中绿色箭头所在的空间。

我尝试过使用cellspacing="0"和cellpadding="0"，也通过浏览器调试工具启用/禁用表格相关CSS元素，但均未改变单元格内边距。

以下是表格初始化及列配置的JS代码：

var table_dom = $('#table');
self.table = table.DataTable({
    serverSide: true,
    dom: "<'row'<'col-md-6'l><'col-md-6'f>>" +
         "<'row'<'col-md-12'tr>>" +
         "<'row'<'col-md-5'i><'col-md-7'p>>",
    ajax: self.callUrl(),
    columns: [
        { data: 'id', name: 'id', title: 'ID' },
        // ... some columns
        {
            data: 'some_data',
            render: function (data) {
                image = "<img src='http://www.dvd-ppt-slideshow.com/images/ppt-background/background-1.gif'/>";
                return image ? `<div title="${data}" class="case-thumbnail aw-tooltip admin-tooltip">${image}</div>` : '';
            },
            name: 'some_image',
            title: 'Image',
            orderable: false
        },
        // ... more columns
    ],
    order: [[0, 'desc']],
    responsive: true,
    pageLength: 10
});

表格容器的HTML代码如下：

<div class="col-md-12">
    <table id="table" class="table table-bordered table-data table-responsive responsive" cellspacing="0" cellpadding="0" width="100%"></table>
</div>

任何方案均可，理想方案仅影响该列单元格，若影响所有单元格也可接受。

编辑1 #

按照@Andrei Gheorghiu提出的在类中使用background: url('path/to/image') no-repeat center center /cover;的方案，是否可仅通过render函数的style属性实现？因每行图片不同，需为每个单元格动态赋值。目前代码无法显示图片，推测是样式应用于单元格内的<div>而非<td>元素，能否从JS代码直接为<td>应用样式？

self.table = table.DataTable({
    // ... table settings
    columns: [
        // ... some columns
        {
            data: 'some_data',
            render: function (data) {
                image = getImgUrl();
                return image ? `<div title="${data}" class="class1 class2" style=" background-image: url('${image}') no-repeat center center /cover"></div>` : 'No image';
            },
            name: 'some_image',
            title: 'Image',
            orderable: false
        },
        // ... more columns
    ],
    // ... table settings
});

编辑2 #

我发现空<div>无法显示背景图，尝试添加width: '100%'; height: '100%';及 后，背景图可显示但仍未填满整个单元格：

JS（render函数返回值）：

return `<div title="${data}" class="class1 class2" style="width: '100%'; height: '100%'; background: url('http://www.dvd-ppt-slideshow.com/images/ppt-background/background-1.gif') no-repeat center center /cover;)">&nbsp;</div>`

方案1：通过背景图实现（适配动态图片） #

这个方案能完美解决你动态设置每行图片的需求，同时让图片填满单元格：

1. 先给目标列的单元格添加自定义类，清除内边距：

columns: [
    // ... 其他列
    {
        data: 'some_data',
        render: function (data) {
            const imageUrl = getImgUrl();
            if (!imageUrl) return 'No image';
            // 动态设置背景图，同时保留提示文字
            return `<div class="image-cell-content" title="${data}" style="background-image: url('${imageUrl}');">&nbsp;</div>`;
        },
        name: 'some_image',
        title: 'Image',
        orderable: false,
        // 给单元格添加自定义类，用于清除内边距
        createdCell: function(td) {
            $(td).addClass('image-column-cell');
        }
    },
    // ... 其他列
]

2. 添加对应的CSS样式：

/* 清除目标列单元格的默认内边距 */
.image-column-cell {
    padding: 0 !important;
    /* 可选：设置最小高度，避免单元格过矮 */
    min-height: 80px;
}

/* 让内容容器填满整个单元格 */
.image-cell-content {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

方案2：使用<img>标签实现 #

如果你更习惯用<img>标签，同样可以实现填满效果：

1. 同样给单元格添加自定义类，然后设置图片样式：

.image-column-cell {
    padding: 0 !important;
    min-height: 80px;
}

.image-column-cell img {
    width: 100%;
    height: 100%;
    /* 保持图片比例，填满容器且不拉伸变形 */
    object-fit: cover;
}

2. 修改render函数返回<img>标签：

render: function (data) {
    const imageUrl = getImgUrl();
    return imageUrl ? `<img src="${imageUrl}" title="${data}" />` : 'No image';
}

关键注意事项 #

• 用!important是为了覆盖DataTables自带的单元格内边距样式，如果你能提高选择器优先级（比如#table .image-column-cell），也可以不用!important
• 给单元格设置min-height可以避免因内容过少导致图片显示过小
• background-size: cover和object-fit: cover都能保证图片比例正确，不会出现拉伸变形的问题，根据你的习惯选择即可

内容的提问来源于stack exchange，提问作者Adam J