CODEWITHSUNDEEP
htmlcss
MAG
MAG

Reputation: 3075

Image in table cell has wrong dimensions

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

Upvotes: 1

Views: 65

Answers (4)

Syed Israr Ahmad
Syed Israr Ahmad

Reputation: 109

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>

Upvotes: 4

Kendall Pinto
Kendall Pinto

Reputation: 28

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

Upvotes: -1

Suraj Sanwal
Suraj Sanwal

Reputation: 790

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

Upvotes: 0

lordsanken
lordsanken

Reputation: 58

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

Upvotes: 0

Related Questions