В CSS, как я могу установить границу вокруг того, что отображается вместо того, что он занимает? ⇐ Html

[Anonymous]

У меня есть Div, содержащий изображение. Я хочу, чтобы изображение, независимо от того, больше ли он или меньше, чем Div, содержащий его, было максимально большим, чтобы он вписывался в DIV без изменения соотношения сторон. Я могу достичь этого с помощью своего кода, но я также хочу разместить границу вокруг изображения. Делая это, граница окружает весь контейнер, а не только отображаемое изображение. Какое решение?
заранее. < /P>
Вот мой код: < /p>



.divClass{
position: absolute;
top: 15%;
width: 32%;
height: 82.5%;
display:flex;
align-items:center;
justify-content: center;
}

.imgClass{
width: 100%;
height: 100%;
border: 1px solid rgb(118, 180, 255);
object-fit: contain;
}
< /code>
Здесь я помещаю 2 образца изображений: < /p>
Пример 1
Пример 2 < /p>
Я бы хотел, как я бы сказал, чтобы граница была рядом и прикреплена к изображениям. Соотношение.

Подробнее здесь: https://stackoverflow.com/questions/797 ... hat-it-occ