HTML: images are not fitting properly into the table cell

user21698401
April 21, 2023
349 views
3 votes
4 Answers

My HTML code:

<div style="text-align:center;">
  <table style="background-color:rgb(166, 235, 157); border: 2px solid black; width:100%;">
    <tr>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="100" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="125" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="150" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="150" height="150">
      </td>
      <td style="border: 1px solid black; text-align:center">
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
        <div style="background-color:rgb(148, 76, 17); width:100%; padding:5px; color: white; font-weight: bold; font-style: italic;">21 Apr, 2023</div>
        <div style="background-color:rgb(20, 104, 104); padding:5px; color: white; font-style: italic; font-weight: bold;">Press Clippings</div>
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
      </td>
    </tr>
  </table>
</div>

The output:

As you can see, the images are not properly fit into the table cells, I want the images to take 100% height of their parent table cells respectively, except for the 5th cell. How do I do it? Please guide me.

Tags: css html

Answers

Define you width and height in CSS, not on the <img> tags themselves. I’ve set them to take up 100% of the space available to them, which seems to do what you want.

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div style="text-align:center;">
  <table style="background-color:rgb(166, 235, 157); border: 2px solid black; width:100%;">
    <tr>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300">
      </td>
      <td style="border: 1px solid black; text-align:center">
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300"></div>
        <div style="background-color:rgb(148, 76, 17); width:100%; padding:5px; color: white; font-weight: bold; font-style: italic;">21 Apr, 2023</div>
        <div style="background-color:rgb(20, 104, 104); padding:5px; color: white; font-style: italic; font-weight: bold;">Press Clippings</div>
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300"></div>
      </td>
    </tr>
  </table>
</div>

I’ve made another version of the code with all your styles pulled out into separate CSS, it’s much more readable and manageable this way.

table {
  background-color:rgb(166, 235, 157);
  border: 2px solid black;
  width:100%;
  text-align:center;
}

table td {
  border: 1px solid black;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#press-clipping-cell {
  width: 150px;
}

#press-clipping-cell img {
  width:100%;
  border:1px solid black;
  height: 50px; /*This size overrides the above defined 100% height for only these images*/
}

#press-clipping-date,
#press-clipping-title {
  padding:5px;
  color: white;
  font-style: italic;
  font-weight: bold;
}

#press-clipping-date {
  background-color:rgb(148, 76, 17);
}

#press-clipping-title {
  background-color:rgb(20, 104, 104);
}

<table>
  <tr>
    <td>
      <img src="https://picsum.photos/200/300">
    </td>
    <td>
      <img src="https://picsum.photos/200/300">
    </td>
    <td>
      <img src="https://picsum.photos/200/300">
    </td>
    <td>
      <img src="https://picsum.photos/200/300">
    </td>
    <td id="press-clipping-cell">
      <img src="https://picsum.photos/200/300">
      <div id="press-clipping-date">21 Apr, 2023</div>
      <div id="press-clipping-title">Press Clippings</div>
      <img src="https://picsum.photos/200/300">
    </td>
  </tr>
</table>

set style="height:100%;" for your images.

<div style="text-align:center;">
  <table style="background-color:rgb(166, 235, 157); border: 2px solid black; width:100%;">
    <tr>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="100" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="125" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="150" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="150" height="150">
      </td>
      <td style="border: 1px solid black; text-align:center">
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150" style="height:100%;"></div>
        <div style="background-color:rgb(148, 76, 17); width:100%; padding:5px; color: white; font-weight: bold; font-style: italic;">21 Apr, 2023</div>
        <div style="background-color:rgb(20, 104, 104); padding:5px; color: white; font-style: italic; font-weight: bold;">Press Clippings</div>
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150" style="height:100%;"></div>
      </td>
    </tr>
  </table>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table{
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

<div style="text-align:center;">
  <table style="background-color:rgb(166, 235, 157); border: 2px solid black; width:100%;">
    <tr>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="100" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="125" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="150" height="150">
      </td>
      <td style="border: 1px solid black;">
        <img src="https://picsum.photos/200/300" width="150" height="150">
      </td>
      <td style="border: 1px solid black; text-align:center">
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
        <div style="background-color:rgb(148, 76, 17); width:100%; padding:5px; color: white; font-weight: bold; font-style: italic;">21 Apr, 2023</div>
        <div style="background-color:rgb(20, 104, 104); padding:5px; color: white; font-style: italic; font-weight: bold;">Press Clippings</div>
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
      </td>
    </tr>
  </table>
</div>

You can define the images as background to the divs instead of adding as image tags, this will allow you to control them better with css:

<div style="text-align:center;">
  <table style="background-color:rgb(166, 235, 157); border: 2px solid black; width:100%;">
    <tr>
      <td style="border: 1px solid black; height: 150px; width: 100px; background: url('https://picsum.photos/200/300')">
      </td>
      <td style="border: 1px solid black; height: 150px; width: 125px; background: url('https://picsum.photos/200/300')">
      </td>
      <td style="border: 1px solid black; height: 150px; width: 150px; background: url('https://picsum.photos/200/300')">      
      </td>
      <td style="border: 1px solid black; height: 150px; width: 150px; background: url('https://picsum.photos/200/300')">
      </td>
      <td style="border: 1px solid black; text-align:center">
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
        <div style="background-color:rgb(148, 76, 17); width:100%; padding:5px; color: white; font-weight: bold; font-style: italic;">21 Apr, 2023</div>
        <div style="background-color:rgb(20, 104, 104); padding:5px; color: white; font-style: italic; font-weight: bold;">Press Clippings</div>
        <div style="width:100%; border:1px solid black; height:50px;"><img src="https://picsum.photos/200/300" width="150"></div>
      </td>
    </tr>
  </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.