javascript - 如何使图像适合整个 JQuery DataTable 单元格

Question

这是一个相当简单的问题，但不幸的是，我似乎无法在 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;在一个类中，有没有一种方法可以使用我的渲染函数中的样式属性来做到这一点？我问是因为每一行的图像都不同，因此我需要为每个单元格动态分配它，而不是在它自己的 css 类中定义它。

这是我目前的代码，目前不显示图像。我相信这是因为样式正在应用于 <div>。在单元格内而不是 <td>元素。那么有没有办法将样式应用于 <td>元素直接来 self 的 JS 代码？

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%';并添加  到 div 的内容。我现在可以显示背景，但它仍然没有占据整个屏幕:

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

截图:

Answer 1

当你想用你不使用的图像覆盖元素时 <img> .
您使用 background-image :

.yourBgImgClass {
  background: url('path/to/image') no-repeat center center /cover;
}

它将在不破坏图像宽高比的情况下，从顶部+底部或左侧+右侧均匀地覆盖带有图像裁剪的元素。