小编Chr*_*ter的帖子

图像应在表格单元格中具有响应性，并且背景色应填充所有空白区域。

我正在Drupal网站（版本8.6.7）上工作，该网站将使数字符号显示在表行中。我正在使用Drupal8 Zymphonies主题8.x-1.3，我希望它能在从笔记本电脑到手机的设备上运行。我还希望图像填充尽可能多的单元格，而背景色将填充其余部分。我在自定义文本字段的视图中生成此代码。我正在尝试使用放置在td-tag中的CSS类，但是它不起作用。-在小型设备中，图像会变得很小，并且不会填满td单元。-背景颜色不能完全覆盖图像。-空单元格在中间出现一个白色正方形。

In CSS-file I have this:
 .uptoten {
    background-color:yellow;
    padding: 0px; 
    margin: 0px;
}   

在自定义文本字段中，我在td-tag中使用此类：class ='uptoten'

在结果上附加了图像。在笔记本电脑上：

我希望白色的内部正方形消失，并且图像填充单元格。

在小型设备上，图像太小：

输入的Twig：

{%set img_txt = random(['anka', 'groda', 'tomte', 'drake'])%}
{%set img_file = '/sites/default/files/num-images/'~img_txt~'.jpg'%}
{%set img_blanc = '/sites/default/files/num-images/empty.jpg'%}
{%set max=nothing|trim%}
{%set blanc=20-max%}
<table >
  <tr>
{% for i in 1..20 %}
{% if i<11 %}
<td class='uptoten'>
{% else%}
<td>
{% endif %}

{% if i<=max %}
    <img alt={{img_txt}} src={{img_file}} />

    {%else%}
    <img alt="empty" src={{img_blanc}} />
{% endif %}
</td>
{% …