Как центрировать img внутри div?

Question

[yavaskript]

<div>
    <img src="...">
</div>

Имеется div фиксированного размера - 200x300px. В него нужно поместить изображение рандомного размера (может быть больше блока div или меньше, не важно). Но изображение в div должно отображаться так: если картинка больше div, то она подгоняется под размеры div по своей меньшей стороне (высоте или ширине). А по большей стороне центрируется в div. Если картинка меньше размера div, то она растягивается по своей меньшей стороне (ширине или высоте), чтобы заполнить div, и центрируется по своей большей стороне.

Comments

[Антон]

Сделайте object-fit и всё. Не могу себе представить тот макет, где вот все вышеописанное будет не убого смотреться

[Comsequent]

div {
display:flex;
justify-content: center;
align-items: center;
}
Как вариант

Answer 1

[alex]

object-fit: cover


object-fit: contain

Answer 2

[Lord_Dantes]

Так? https://codepen.io/lord-dantes/pen/MWwgbWJ