как сделать так, чтобы изображение в таблице помещалось внутри ячейки и не переполняло или не расширяло ячейки, используя html и css

Question

У меня есть таблица фиксированного размера с изображениями внутри div в каждой ячейке. Изображение должно быть уменьшено пропорционально размеру ячейки таблицы ... но когда я показываю изображение, оно переполняется с высотой, увеличивающей ячейку и ее таблицу. но ширина масштабируется, чтобы поместиться внутри ячейки

вот код (.cells это div внутри td, а таблица находится внутри контейнера div фиксированной длины

.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%;
}

, что делает Фиксированный div или td - это не вариант, поскольку таблица может быть размером 2x2, 3x2 или 4x4 в зависимости от выбора пользователя. Приведенный выше код подгонит изображение по ширине в любом измерении. Но высота переполняется.

Обновление: Сработало!

overflow: auto;

внутри сработавших ячеек (.cells - это div внутри тд)

Answer 1

Выберите изображение и попробуйте подгонку объекта: обложка

Answer 2

Ваш table имеет два td в tr, поэтому вы можете использовать ниже css

.view-grid table img
{
    max-width:50vw;
}