I am new to web dev, so please bear with me. I have to create a block with a set of images like this:
I tried using a table to do this, but the image propotions of the last columns aren't correct. I believe that coz of the height of the rows. I managed to get the center image correctly by using rowspan
. I looked up numerous tutorials online but couldn't find one where the middle image is like this. I tried using li
too. But failed. This is the code of the table I have
<table class="home" align="center">
<tr>
<td><img src="http://localhost/sty_partners/img/main_top_left.jpg" alt="" class="img-responsive center-block" >
</td>
<td rowspan ="2"><img src="http://localhost/sty_partners/img/main_center.jpg" alt="" class="img-responsive center-block">
<!--<div class="center" > <p> SPEND MORE <br> time doing what <br> you love</p> </div>-->
</td>
<td><img src="http://localhost/sty_partners/img/main_top_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
<tr>
<td><img src="http://localhost/sty_partners/img/main_bottom_left.jpg" alt="" class="img-responsive center-block"></td>
<td><img src="http://localhost/sty_partners/img/main_bottom_right.jpg" alt="" class="img-responsive center-block"></td>
</tr>
</table>
This is the CSS for the table:
table.home img{
width:100%; height:100%;}
Can someone please tell me what to do?