Image in table cell has wrong dimensions-CodePudding

I am handling html css code like this so that my table has a cell with images

    .illustration_tr {
      top: opx;
      left: 0px;
      width: 512px;
      height: 288px;
     
      background: #eaeaea 0% 0% no-repeat padding-box;
      border-radius: 4px;
      opacity: 1;
    }
    .illustration_td {
      max-height: 100%;
      max-width: 100%;
      overflow: clip;
    }

    <tr  id="illustration_tr">
                      <td>
                        <img  id="illustration_td" src="https://cdn.pixabay.com/photo/2022/04/18/02/24/architecture-7139263_1280.jpg" />
                      </td>
    </td>

The final image comes likes this . If you see it shows 512 x 341 in chrome debugger which is not what i want . How can i make it explicit to my specs of 512 x 288

CodePudding user response：

use this CSS code

.illustration_tr {
      top: 0px;
      left: 0px;
      
     
      background: #eaeaea 0% 0% no-repeat padding-box;
      border-radius: 4px;
      opacity: 1;
    }
    .illustration_td {
        width: 512px;
      height: 288px;
      overflow: clip;
    }

CodePudding user response：

Try setting

max-width: 512px; !important

and

width: 512px;

this way that image cant get bigger than 512px.

But if it does, it means that somewhere in your code there is something which is making the picture bigger (some non-constant size is most likely to be it).

CodePudding user response：

Try this:

.illustration_table {
  border-spacing:0;
}

.illustration_td {
      width: 512px;
      height: 288px;
      background: #eaeaea 0% 0% no-repeat padding-box;
      border-radius: 4px;
      opacity: 1;
      background: red;
      display: flex;
      padding: 0;
    }
     .illustration_td img {
        width:100%;
        height: 100%;
        overflow: clip;
     }

<table  cellspacing="0">
<tr  id="illustration_tr">
                      <td  id="illustration_td">
                        <img src="https://cdn.pixabay.com/photo/2022/04/18/02/24/architecture-7139263_1280.jpg" />
                      </td>
</tr>
</table>

Update

Changing the display property of td from display: table-cell to display: flex removed the whitespace

CodePudding user response：

You can go into paint and update the size of the image, ig.