Как разместить картинку относительно большей стороны в контейтер?

Question

[Nik Faraday]

Здравствуйте!

Нужно картинку любого размера разместить в контейнер сохранив все пропорции как на картинке ниже:



Суть в том, что нужно сделать отступы на недостающих фрагментах картинки, но так получается только по горизонтали. Это делается через js, когда открывается картинка

$('#image').css('height', document.documentElement.clientHeight * 0.75);

Если вместо этой строки я попробую сделать отступы по вертикали задав конкретную привязку по ширине, то ничего не получится

$('#image').css('height', document.documentElement. * 0.75);

А вот сам результат



Тут картинка обрезается по правой и левой сторонам и нет чёрных отступов. Вот ниже сами фрагменты кода.

<div id="theparent" class="document-image">
            <img id="image" src="@Model.ImagePath">
        </div>

Стили:

.document-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    background-size: contain;
}

document-image img {
    width: 100%;
    height: 100%;
}

Answer 1

[Антон Антон]

https://developer.mozilla.org/en-US/docs/Web/CSS/o... ?

Comments

[Nik Faraday]

Всё равно не то

document-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

[Антон Антон]

Nik Faraday, не знаю, у меня всё работает: https://codepen.io/FragsterAt/pen/LYraWmE

[Nik Faraday]

Антон Антон, хорошо, я буду отталкиваться от вашего кода, хотя и так третий день играюсь с этим. Большое спасибо

[Nik Faraday]

Антон Антон, Наконец-то сделал, ещё раз вас благодарю ))