behzad razzaqi behzad razzaqi - 5 months ago 17
CSS Question

Why image not fit to table cell height in html?

I want to split screen to two area left and right,in right segment show a image and in right segment show textbox,for that purpose write this html code:


<table style="width:100%">
<tr>
<td style="width:50%;height:100%;" align="center">
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
</td>
<td style="width:50%;">
behzad
</td>

</tr>

</table>




but when i run the html page ,image not fit to the table column height,and i must scroll the browser to see all of the page,i want just fit to the screen height,my out put i this :

enter image description here

Answer

Use viewport units vh/vw, and to keep aspect ratio on the image, set the style on the image to display:block;max-width:50vw;max-height:100vh

html, body {
  margin: 0;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0;
  vertical-align: top;
}
<table style="width:100vw">
  <tr>
    <td style="width:50vw;height:100vh;" align="center">
      <img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
    </td>
    <td style="width:50vh;">
      behzad
    </td>
  </tr>
</table>

Comments