I am wanting to insert many images within a cell in HTML. I tried with object-position
but the images would not be accommodating.
I want each image to be one in each corner (top left and right and bottom left and right).
This is how I'm trying:
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
<td style="padding: 0; margin: 0; padding-bottom: 20px; display: flex">
<img style="object-position: left top; width:100px; height: 100px;" src="~/ImgAndroid/Prueba1.jpg"/>
<img style="object-position: right top; width:100px; height: 100px;" src="~/ImgAndroid/Prueba2.jpg"/>
<img style="object-position: left bottom;width:100px; height: 100px;" src="~/ImgAndroid/Prueba3.jpg"/>
<img style="object-position: left bottom;width:100px; height: 100px;" src="~/ImgAndroid/Prueba4.jpg"/>
</td>
</tr>
I put the styles in the labels but they are in their own file.
VERY vulgarly this is what I'm looking for
And in case of having more than 4 images, that in the last image I can click and open all the images (I think this is done with Js, but first I want to place each photo in its respective place)
I hope it has been understood and I apologize for the poor illustrative image I made for the example
You could use Grid layout
Example:
The example displays the images within a 2-column grid with rows of a minimum of 100 pixels and an automatic maximum.