I'm attempting to create a table with 4 cells, each containing an image. My goal is to use a test image for now and set the size of the image in percentage so that it resizes with the window. However, I am facing an issue where when I specify the image size in %, the cell containing the image remains the width of the original image. The image does resize, but the cell does not. Surprisingly, the height resizes properly. If I use pixels for image size, it works but it's not what I want. I even tried placing the image directly in the HTML code but encountered the same problem. I need the image size to be in % so that it can resize along with the window width changes.
Here is my code snippet:
table,
tr,
td {
border: 1px solid black;
margin-left: 10%;
margin-bottom: 20%;
}
td {
margin: auto;
padding: auto;
}
.image1 {
background: url(../afb/test.png);
width: 50%;
height: 50%;
}<!--pictures-->
<table>
<tr>
<td><div class="image1"></div></td>
<td>pic 2</td>
</tr>
<tr>
<td>pic3</td>
<td>pic4</td>
</tr>
</table>