Адаптивные изображения в таблице

Question

Изображение должно быть отзывчивым в ячейке таблицы, а цвет фона должен заполнить все пустое пространство.

Я работаю на сайте Drupal (версия 8.6.7), который должен отображать символику чисел в строках таблицы.,Я использую Drupal8 Zymphonies Theme 8.x-1.3. Я хочу, чтобы это работало на устройствах от ноутбуков до телефонов.Я также хочу, чтобы изображение заполнило как можно большую часть ячейки, а цвет фона должен заполнить все остальное.Я производил это в представлениях внутри настраиваемого текстового поля.Я пытаюсь использовать класс CSS, который я поместил в тд-тег, но он не работает.- В небольших устройствах изображение становится очень маленьким и не заполняет td-ячейку.- Цвет фона не заполняет все вокруг изображения.- Пустые клетки получают белый квадрат в середине.

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

В настраиваемом текстовом поле я использую этот класс в теге td: 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>