how do i make the image in a table fit inside the cell and not overflow or expand the cells using html and css

I have a table of fixed sizer with images inside a div in each cells. The image should be scaled down proportionally to the size of the table cell.. but when i show image, it is overflowing with the height expanding the cell and table itslef. but the width is scaled to fit inside the cell

here is the code (.cells is the div inside the td and the table is inside a fixed length div container

.view-grid {
  height: 565px;
  width: 1000px;
}
table {
  height: 565px;
  width: 1000px;
}
td {
  border: solid 1px;
  height: calc(100% / 4);
  width: calc(100% / 4);
}
.cells {
  height: 100%;
  width: 100%;
}
img {
  height: 100%;
  width: 100%;
}

making the div’s or td’s fixed is not an options since the table can be 2x2 or 3x2 or 4x4 based on user selection. The above code will fit the image widthwise in any dimension. But height overflows.

Update: Worked!

overflow: auto;

inside the .cells worked (.cells is the div inside the td)