Как растягивать картинку, чтобы границы всегда было по её контуру?

Question

[Посторонним В.]

Есть обертка с фиксированным размером, и в ней - картинка:

<div class="wrapper"><img src="" alt=""></div>

.wrapper {
    width: 8em;
    height: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      border: calc(1em / 12) solid black;
      border-radius: calc(11em / 12);
}

Мне нужно, чтобы любые картинки вписывались в размеры обертки (с сохранением пропорций, с максимальным размером), и при этом рамка шла по их границам, а не по границам обертки. Сейчас всё работает, но только для изображений, которые не меньше обертки. Маленькие изображения просто на растягиваются, а остаются как есть. Как сделать, чтобы они растягивались?
Если задаю картинке width/height - то рамка для мелких изображений уже идёт не по их контуру, а по заданным размерам.

Comments

[Kovalsky]

1) background, 2) object-fit

[Посторонним В.]

Никита Полевой, вы там не заметили object-fit?

[Kovalsky]

Посторонним В., нет. Но теперь вижу. И что, cover не помогает?

[Посторонним В.]

Никита Полевой, cover обрезает, мне нужно вписать.

[Kovalsky]

Посторонним В., а если оставить contain, но убрать max- из max-width/height?

[Посторонним В.]

Никита Полевой, прочитайте внимательно вопрос, особенно последнее предложение.

[Kovalsky]

Посторонним В., таки прочитал. Как у вас все сложно.

[Glorious Cat]

Вы имели в виду чтобы было вот так: https://jsfiddle.net/tansur/mxfd7uq0/ ?
Возможно что я неправильно понял ваш вопрос.

[Посторонним В.]

Рустем Насыров, поставьте туда узкую картинку (с шириной меньше 8em) и увидите, что рамка не по ней станет.

[Glorious Cat]

Посторонним В., https://jsfiddle.net/tansur/23Lbhm33/

[Посторонним В.]

Рустем Насыров, это то же самое, что у меня. Я же говорю, что картинка должна вписываться с максимально доступным размером, а тут маленькие картинки такими же и остаются, не растягиваются, при этом сохраняя пропорции и не обрезаясь.

[Glorious Cat]

Посторонним В., https://jsfiddle.net/tansur/kbcsekgj/

[Посторонним В.]

Рустем Насыров, что изменилось ? Вторая картинка по-прежнему меньше контейнера и по ширине, и по высоте.

Answer 1

[Посторонним В.]

Как я и думал, решение было близко. Нужно было просто задать max-* контейнеру, а картинке - width/height = 100%.
https://jsfiddle.net/8t7zs2ke/1/