Как масштабировать изображение, чтобы вписаться в гибкую коробку в сетку ⇐ CSS

[Anonymous]

Я хочу создать страницу «приборной панели», которая использует все доступное пространство в окне браузера. Окно браузера будет разделено на две стороны равной ширины. Правая боковая пространство будет содержать слайд -шоу. Изображения, которые больше, чем доступное пространство, должны быть увеличены, чтобы соответствовать и быть центрированными в пространстве. Тело содержит двухколонную сетку, размеры которых составляют 1FR & 1FR. Righthand Griditem -это Flexbox. Это, в свою очередь, содержит Flexbox , содержащий .
Обязательно нажмите «Полная страница» для фрагмента и расширения Окно браузера, если это необходимо. . Изображение правильно сжимается как по высоте, так и по ширине, чтобы соответствовать, когда размеры окна изображения указаны в абсолютных единицах. "Snippet-Code">

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

/* Slideshow generates rectangles of various dimensions */
const duration = 1500; // time (msec) to display each slide
const sleep = ms => new Promise(r => setTimeout(r, ms));
const sizes = [
[4000, 500, "Oversize horizontal"],
[1000, 4000, "Oversize vertical"],
[400, 300, "Should fit"],
[100, 200, "Very small"],
[4000, 4000, "Oversize square"]
];

async function show_slide_test(duration, min = 0, max = 0) {
let n = 0;
const my_img = document.querySelector('#slide-div-img');
let my_randomizer;
while (true) {
let size_index = n++ % sizes.length;
let w = sizes[size_index][0];
let h = sizes[size_index][1];
let desc = sizes[size_index][2];
let my_randomizer = `https://placehold.co/${w}x${h}/orange/black/png?text=${desc}\\n${w}+x+${h}+px`;
try {
const my_response = await fetch(my_randomizer);
const my_blob = await my_response.blob();
URL.revokeObjectURL(my_img.src);
const my_url = URL.createObjectURL(my_blob);
my_img.src = my_url;
await sleep(duration);
} catch (my_error) {
console.error('Error: ', my_error);
break;
}
}
}< /code>
* {
box-sizing: border-box;
}

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

body {
outline: 4px dashed red;
outline-offset: -4px;
height: 100%;
/* limit to height of html */
width: 100%;
margin: 0;
/* prevent body from shifting */
padding: 0;
overflow: hidden;
/* prevents any body scroll */
}

/* Divide body into a grid of 2 columns */
panels {
background: blue;
min-height: 100%;
display: grid;
grid-template-columns: 50fr 50fr;
gap: 2em;
}

/* Left-hand panel */
left-panel {
background: pink;
}

/* Right-hand panel */
right-panel {
background: yellow;
display: flex;
justify-content: center;
align-items: center;
}

/* Flex item inside right panel flexbox */
picture-box {
background: green;
display: flex;
justify-content: center;
align-items: center;
/* what magic values will make picture box grow to size of right-panel? */
width: 600px;
height: 400px;
}

.scaled-picture {
outline: 8px double black;
outline-offset: -8px;
max-width: 100%;
max-height: 100%;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/794 ... -a-gridbox