使td的背景图像适合100%的非静态图像

Question

我有一个td标签:

<td class="np-logo" style="width: 228px; height: 50px;">
                                            </td>

CSS:

和

.np-logo
{
background-repeat: no-repeat;
background-size: 100%;
}

我正在根据公司的标志改变形象。所有的图片都有不同的大小和宽度。

.np-logo{background-image:url('" + companylogo + "');

问题是图像不能正确地适应td。我想让他们占据整个td，但是对于每个公司的背景图像的位置是不统一的。我甚至尝试在图像加载上使用java脚本来适应容器。但是没有成功。

有什么帮助吗?

Answer 1

Try

background-size: 100% 100%;

第一个值表示宽度，第二个值表示高度。

您可以通过以下链接了解更多信息

Answer 2

您试过cover吗?

.np-logo {
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 3

试试这个:

<td class="np-logo" style="max-height: 100%; max-width: 100%">

或

<td class="np-logo" style="max-height: 228px; max-width: 50px">