Javascript 如何使图像适合整个JQuery数据表单元格

这是一个相当简单的问题，但不幸的是，我似乎无法在DataTable文档或StackOverflow上找到答案

我正在尝试使图像适合JQuery数据表的整个单元格。更准确地说，我试图让我的图像占据下面截图中绿色箭头所占据的空间

我尝试了一些解决方案，例如使用

cellspacting=“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
});

---

编辑2：

我进一步发现，如果

为空，背景当然不会显示。所以我尝试了一些方法，比如使用

width:“100%”；身高：“100%”

并将

添加到div的内容中。我现在可以显示背景，但它仍然不占用整个屏幕：

JS（从

render

函数返回）：

return``

截图：

---

当您想用图像覆盖元素时，您不需要使用

您使用：

---

它将使用从上+下或从左+右等分裁剪的图像覆盖元素，而不会破坏图像的纵横比。

一点也不，@joe。这是必需的。@AndreiGheorghiu Thansk对于解决方案，我没有想过。但是您认为有没有一种方法可以只使用我的

render

函数中的

style

属性来实现这一点？我这样问是因为每一行的图像是不同的，因此我需要动态分配，而不是在自己的css类中定义它。如果需要，我会更新我的问题。@AndreiGheorghiu哦，我是说斜杠：）这是IE8防御措施还是什么？@joe我知道你的意思。这是标准的CSS。为什么不检查？@AdamJaamour，您可以在CSS中设置公共属性（

background:transparent no repeat center/cover

），并且仅使用

样式

单独传递

背景图像。样式表只是一个可以放置CSS的地方，而不是将其放置在
style
中。但如果后者对你更有意义，那它就起作用了。
<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>

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
});

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

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