Today, you are going to learn how to fit image in table cell using css.

When we try to add an image in table cell, we have to face a problem. The image doesn't fit to the table cell.

So, in this article we will try to fit an image to <td> tag using css properties.

The problems.

I have tried to set the image's width to 100% and also height to 100% but the image didn't fit to the table cell.

How to fit an image to table cell.

So, I decided to use the <div> element instead of the <table>.

Demo of the solution
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt sem et risus lacinia eleifend. Ut non suscipit magna. Quisque vel tincidunt tortor.
Try it Yourself »
  1. First, I have created a <div> element with the class tr.
    <div class="tr">
</div>
  2. Inside this <div> element, create two <div> elements as a child.
      <div class="tr">
    <div class="td">
    </div>
    <div class="td">
    </div>
  </div>
  3. Inside the first child element, I wrote some dummy text.
      <div class="tr">
    <div class="td">
      Lorem ipsum dolor sit amet.... 
    </div>
    <div class="td">
    </div>
  </div>
  4. Inside the second child element, I have created an <img> element.
      <div class="tr">
    <div class="td">
      Lorem ipsum dolor sit amet.... 
    </div>
    <div class="td">
      <img src='https://stories.3schools.in/img/b.png'>
    </div>
  </div>
  5. Now time to style it. 
    <style>
.tr{
  width: 100%;
  max-height: 120px;
  display: flex;
}
.td{
  border: 1px solid black;
}
 .td img {
    width: 100%;
    height: 100%;
  }
</style>

Finally, click on the Try it Yourself » button to open the code in html editor.

All code together 
<style>
.tr{
  width: 100%;
  max-height: 120px;
  display: flex;
}
.td{
  border: 1px solid black;
}
 .td img {
    width: 100%;
    height: 100%;
  }
</style>

<div class="tr">
 <div class="td">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt sem et risus lacinia eleifend. Ut non suscipit magna. Quisque vel tincidunt tortor.
 </div>
 <div class="td">
  <img src="https://stories.3schools.in/img/b.png">
 </div>
</div>
Try it Yourself »