Можно ли задать соотношение сторон изображения?
.some-picture {
  background: url('some-picture.png');
  background-size: fill;
  height: 300px;
  width: 400px;
  /* или вместо этих трёх строк */
  background-size: 300px 400px;
}
Для <img> есть правило object-fit
У меня самый колхозный вариант был: создать png картинку с прозрачным цветом с нужным соотношением сторон (и самых гигантских размеров, каким может быть монитор) и поместить ее в виде img в контейнер на самом глубоком z-значении.
Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.