CODEWITHSUNDEEP
htmlcss
behzad razzaqi
behzad razzaqi

Reputation: 275

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

Upvotes: 0

Views: 145

Answers (3)

Asons
Asons

Reputation: 87191

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>

Upvotes: 1

ahe
ahe

Reputation: 21

emphasized text

instead of this section <img src="../Content/45.png" style="display:block;height:100%;width:100%;" />

try this section <img src="../Content/45.png" height="50%" />

I hope it works

Upvotes: 0

Peter Wilson
Peter Wilson

Reputation: 4319

in this case you'd better use background-image instead of <img> to avoid stretching

check the following demo

html,body{
  height:100%;
}
table{
  height:100%;
}
<table style="width:100%">
          <tr>
            <td style="width:50%;height:100%;background-image:url(http://placehold.it/600x600)" align="center">
      
            </td>
            <td style="width:50%;">
                behzad
            </td>

          </tr>

        </table>

Upvotes: 0

Related Questions