Как создать рамку для изображения, размер которого был изменен с помощью подгонки объекта: уменьшение масштаба ⇐ CSS

[Anonymous]

У меня есть слайд-шоу на JavaScript, которое отображает изображения разных размеров в окне браузера. Он использует object-fit: Scale-down, чтобы изменить размер изображения в соответствии с контейнером. Я хотел бы добавить рамку к изображению, но когда я применяю границу стиля: 2px сплошной черный к элементу , кажется, что она окружает то, что было бы изображением в оригинале. , немасштабированный размер.
Есть ли способ с помощью CSS или JavaScript применить рамку к изображению с измененным размером?
Обновление: я бы предпочел решение, которое позволяет мне использовать семейство настроек стиля border, даже если для этого требуется некоторый JavaScript.

Код: Выделить всё

const duration = 2000; // time (msec) to display each slide
const sizes = [
[4000, 500],
[1000, 4000],
[600, 400],
[100, 200]
];
const sleep = ms => new Promise(r => setTimeout(r, ms));
let size_index = 0;

function show_slides(duration) {
let this_duration = duration;
const my_parent = document.querySelector('#slide-div');
if (size_index == sizes.length) {
size_index = 0;
}
let w = sizes[size_index][0];
let h = sizes[size_index][1];
++size_index;

let my_randomizer = `https://placehold.co/${w}x${h}?text=${w}+x+${h}\npx`;
fetch(my_randomizer)
.then(my_response => my_response.blob())
.then(my_blob => {
let my_url = URL.createObjectURL(my_blob);
sleep(this_duration)
.then(() => {
URL.revokeObjectURL(my_parent.querySelector('img').src);
my_parent.querySelector('img').src = my_url;
show_slides(duration);
});
})
.catch(my_error => console.error('Error: ', my_error));
}

Код: Выделить всё

html {
height: 100%;
width: 100%;
}

body {
/* prevent body from displacing */
margin: 0;
/* body should perfectly superimpose the html */
height: 100%;
width: 100%;
}

.outer-div {
display: flex;
flex-flow: column;
height: 100%;
/* Now create left/right margins */
margin: 0 0.5em;
}

.inner-fixed-div {
margin-top: 0.5em;
}

.inner-remaining-div {
margin-bottom: 1em;
flex-grow: 1;
/* hints the contents to not overflow */
overflow: hidden;
}

.picture-div {
/* force the div to fill the available space */
width: 100%;
height: 100%;
}

.picture-div-img {
/* force the image to stay true to its proportions */
width: 100%;
height: 100%;
/* and force it to behave like needed */
object-fit: scale-down;
object-position: center;
/* does not properly enclose image: */
border: 2px solid black;
}

Код: Выделить всё

Lorem Epsom

Подробнее здесь: https://stackoverflow.com/questions/790 ... it-scale-d