Responsive images in table

Question

The image shall be responsive in the table cell and the background color shall fill all empty space.

I am working on a Drupal site (ver 8.6.7) that shall make number symbolics displaying in table rows. I am using Drupal8 Zymphonies Theme 8.x-1.3 I want this to work on devices from laptops to phones. I also want the image to fill as much of the cell as possible and the background color shall fill the rest. I producing this in views within a custom text field. I am trying to use a CSS class that I put in the td-tag but it is not working. - In small devices, the image gets very small and do not fill the td-cell. - The background color does not fill all around the image. - The empty cells get a white square in the middle.

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

In custom text field I am use this class in td-tag: class='uptoten'

Have attached image on the result. On laptops:

I want the white inner square to disappear and the image to fill out the cell.

On small devices the image is too small:

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

Hope for some help

After searching around, I do not find a good solution for this. I probably skip this approach and convert the pictures to background pictures instead. Doing so I have no problem with responsiveness. This kind of help it is not hard to find. Here is one suggestion: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size — Christer, Feb 18 '19 at 21:46

score 0 · Answer 1 · edited Jan 08 '20 at 05:10

I think it is the case that you need to install module called twig_tweak, which easily provides functionality to cut pictures with desired size in twig at once.

Next: For making it to work on devices (from laptops to phones), you need to define all styles with % sign.

This is the Twig code for one of my projects:

<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>

And CSS:

Try The Code Snippet For Resizing Device Width

.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>

Responsive images in table

1 Answers1