Image in table cell has wrong dimensions

user_1636300 0
Viewed 53

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 class="illustration_tr" id="illustration_tr">
                      <td>
                        <img class="illustration_td" 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 ml

css html
4 Answers

One solution is to set directly the td size instead of tr size.

.illustration_tr {
  top: opx;
  left: 0px;
  background: #eaeaea 0% 0% no-repeat padding-box;
  border-radius: 4px;
  opacity: 1;
}
.illustration_td {
  width: 512px;
  height: 288px;
  overflow: clip;
}
<tr class="illustration_tr" id="illustration_tr">
  <td>
    <img class="illustration_td" id="illustration_td" src="https://cdn.pixabay.com/photo/2022/04/18/02/24/architecture-7139263_1280.jpg" />
  </td>
</tr>

user_189385010

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).

user_178360760

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 class="illustration_table" cellspacing="0">
<tr class="illustration_tr" id="illustration_tr">
                      <td class="illustration_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

user_124840980

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

user_174114580
Related