NikFaraday
@NikFaraday
Student full-stack Developer

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

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

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

6391b9b00fd05229732141.png

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

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


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

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


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

6391baecb7a2a802499023.png

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

<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%;
}
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
Fragster
@Fragster
помогло? отметь решением!
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы