时间戳

首页 > 解决方案 > 如何使图像适合整个 JQuery DataTable 单元格

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

问题描述

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

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

截屏

我尝试了一些解决方案，例如使用cellspacing="0"and 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 Gheorghiubackground: url('path/to/image') no-repeat center center /cover;在类中使用的解决方案，有没有办法只使用我的渲染函数中的样式属性来做到这一点？我问是因为每一行的图像都不同，因此我需要为每个单元格动态分配它，而不是在它自己的 css 类中定义它。

这是我到目前为止的代码，目前不显示图像。我相信这是因为样式被应用于<div>单元格内部而不是<td>元素。那么有没有办法<td>直接从我的 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%';和添加&nbsp;到 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>`

截屏：

第二张截图

标签： javascriptjqueryhtmldatatabledatatables

解决方案

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

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

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

推荐阅读