How to crop image by table cell?

Asked Apr 02 '18 at 14:21

Active Apr 02 '18 at 14:21

Viewed 1,275 times

I have a table with image inside:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    table-layout:fixed;
    width:800px;
}
th, td {
    padding: 15px;
    text-align: left;
}
td#tdimg{
    height: 500px;
}
</style>
</head>
<body>

<h2>Styling Tables111</h2>


<table>
  <tr>
    <td colspan="3" id="tdimg"><img src="file://C:\Users\max\AppData\Local\Temp\ec531b56-e9a8-4fa7-bec6-e56a3c90251d.bmp" alt=""></img></td>
  </tr>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
</table>

</body>
</html>

My table have width:

width:800px;

And my image size: 1500*2200px

How can i crop image by <td> bounds?

asked Apr 02 '18 at 14:21

Kliver Max

5,107
22
95
148

1

Have you tried adding `overflow:hidden` on the cell holding the image? – j08691 Apr 02 '18 at 14:24
You can add overflow:hidden and width to your img style sheet – Josh Adams Apr 02 '18 at 14:26
overflow:hidden crop image bu width, but image height still huge – Kliver Max Apr 02 '18 at 14:28

How to crop image by table cell?

0 Answers0