Можно ли задать соотношение сторон изображения?

Question

[Artem0071]

Можно ли как то тегу img задать соотношение сторон 3 к 2?

Answer 1

[askhat]

.some-picture {
  background: url('some-picture.png');
  background-size: fill;
  height: 300px;
  width: 400px;
  /* или вместо этих трёх строк */
  background-size: 300px 400px;
}

Для <img> есть правило object-fit

Answer 2

[Froggyweb]

Использовать слабо поддерживаемый object-fit
Делать паддинг родителю в процентах его высота должна быть 0. Детей располагать абсолютом
Либо js переводить img в бзкграунд и скрывать оригинал

Answer 3

[alexalexes]

У меня самый колхозный вариант был: создать png картинку с прозрачным цветом с нужным соотношением сторон (и самых гигантских размеров, каким может быть монитор) и поместить ее в виде img в контейнер на самом глубоком z-значении.
Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.