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;的解决方案，有没有办法使用我的渲染函数中的style属性？我问，因为每行的图像不同，因此我需要为每个单元格动态分配它，而不是在自己的css类中定义它。

这是我到目前为止的代码，目前还没有显示图像。我相信这是因为样式正在应用于单元格内的<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%';并将 添加到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;
}

它将覆盖元素，从顶部+底部或左侧+右侧均匀地裁剪图像，而不会破坏图像宽高比。

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

1 个答案: