Question

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

我正在Drupal网站（版本8.6.7）上工作，该网站将使数字符号显示在表行中。我正在使用Drupal8 Zymphonies Theme 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'

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

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

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

输入的树枝：

{%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>
{% endfor%}
  </tr>
</table>

希望获得帮助

Answer 1

我认为您需要安装名为 twig_tweak ，可轻松提供剪切图片的功能立即在树枝上切成所需的大小。

下一步：要使其在设备（从笔记本电脑到手机）上运行，您需要定义所有带有%符号的样式。

这是我的一个项目的Twig代码：

<div class="row"
 {% for i in 1..100 %}
   <a href="#" class="square">
     <div class="content">
       <div class="table">
         <div class="table-cell">
           <b> {{ i }} </b>
         </div>
       </div>
     </div>
   </a>
 {% endfor %}
</div>

和CSS：

尝试使用代码段调整设备宽度

.square {
    float:left;
    position: relative;
    width: 8%;
    padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
    margin:1%;
    overflow:hidden;
    background-color: #0048c8;
    border-radius: 5%;
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
    color: white;
    font-size: 17px;
    text-align: center;
}

<div class="row">
  <a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 1 </b>
        </div>
      </div>
    </div>
  </a>
  <a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 2 </b>
        </div>
      </div>
    </div>
  </a>
  <a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 3 </b>
        </div>
      </div>
    </div>
  </a>
  <a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 4 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 5 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 6 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 7 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 8 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 9 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 10 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 11 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 12 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 13 </b>
        </div>
      </div>
    </div>
  </a>
<a href="#" class="square">
    <div class="content">
      <div class="table">
        <div class="table-cell">
          <b> 14 </b>
        </div>
      </div>
    </div>
  </a>
</div>

表中的响应图像

1 个答案: