How to fit image in table cell in CSS

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.

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