Как поместить в div картинки разных размеров?

Чтобы картинки разных размеров выглядели одинаково, контейнеру задают фиксированный размер или пропорции, а картинке — `object-fit`.

.thumb {
  width: 200px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* заполнить, обрезав лишнее */
  object-position: center;
}

Значения object-fit

• `cover` — картинка заполняет блок, края обрезаются.
• `contain` — картинка целиком внутри блока, могут остаться поля.
• `fill` (по умолчанию) — растягивается с искажением пропорций.

Если картинка — фон

Для декоративных изображений то же делают через background-size: cover и background-position.

Сетка карточек

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }

Коротко для собеседования

Контейнеру — размер или aspect-ratio, картинке — width/height: 100% и object-fit: cover (или contain).

Подробнее: MDN — object-fit