Как задать изображению Aspect Ratio без использования position absolute?

Question

[Dubrovin]

На просторах интернета полно решений как задать изображению Aspect Ratio (например, 16:9) с использованием max-width у контейнера, padding-bottom в % у родительского элемента и position absolute у тега img.
Проблема в том, что данное решение не работает внутри колонки автоматической ширины (для bootstrap это col-auto с flex: 0 0 auto, width: auto, max-width: none).
Существует ли какое-то красивое решение как можно задать изображению Ratio и при этом не использовать position absolute?
p.s. Картинка не должна быть больше контейнера, в котором она находится. Например, если у нас есть картинка с width: 500px, но она находится в колонке сетки с width: 200px, то картинка должна ужиматься до размера колонки с сохранением ratio

Answer 1

[Алексей]

Один из вариантов caniuse object-fit, был у меня подобный вопрос, нашет ответ на Stackoverflow. Меня решение устроило.

Answer 2

[Владимир Проскурин]

Так обычный img умеет решать эту проблему, задаете ему width: 100% (и max-width по вкусу), а высоту игнорите или задаете height: auto. Если картинка задается фоном через css, то в блок кидаете прозрачную картинку 16px на 9px, и также задаете ей width: 100%

Comments

[Dubrovin]

Картинка не задаётся фоном, она задаётся в теге IMG. Если height=autо, то это ситуация с ratio=original. Одно и то же изображение должно иметь возможность отображаться с различным ratio в не зависимости от его оригинальных размеров.

[Максим]

Dubrovin, наверно плохая практика это .... не возможно сменить ratio