Responsive images in table - css

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

Answer 1

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>