So skalieren Sie ein Bild so für eine Flexbox in einer Gridbox ⇐ CSS

[Anonymous]

Ich möchte eine "Dashboard" -Seite erstellen, auf der alle verfügbaren Speicherplatz im Browserfenster verwendet werden. Das Browserfenster wird in zwei gleiche Breitenseiten unterteilt. Der rechte Seitenraum enthält eine Diashow. Bilder, die größer als der verfügbare Raum sind, sollten auf Anpassung skaliert und im Raum zentriert werden. Der Körper enthält eine zweispaltige Gridbox, deren Abmessungen 1FR & 1FR sind. Das rechte GridItem ist eine Flexbox. Dies enthält wiederum einen FlexBox
mit einem . Das Bild schrumpft sowohl in Höhe als auch in der Breite richtig, wenn die Abmessungen der Bilderbox in absoluten Einheiten angegeben sind.

Code: Select all

/* 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>

Update Um MREs in meinen Fragen zu präsentieren, versuchte ich, mein Dashboard -Probleme in zwei kleinere Fragen zu unterteilen. Die früheren Probleme des linken Panels wurden hier gelöst, und ich nahm naiv an, dass diese Frage, die eine Diashow im rechten Feld, unabhängig gelöst und dann dem anderen hinzugefügt werden könnte. Nicht so. Daher muss ich ein weiteres Snippet bereitstellen, das die Details des linken Feldes enthält. Stattdessen bietet es lediglich die Breite und ermöglicht es, dass hohe Bilder vertikal unter der unteren Kante des Panels erstrecken. Ich weiß nicht, welche der beiden in den Antworten verwendeten Ansätze "besser" sind. Beide arbeiten für mein ursprüngliches MRE, aber nicht im größeren Kontext meines Dashboards.

Code: Select all

/* This function populates the scrollable-container grid with variable
numbers of rows of dummy data */
let my_limit;
const my_perday = 3;

function load_scrollable_table(limit) {
my_limit = limit;
if (my_limit < 1) {
return;
}
const my_div = document.querySelector("#whatsnew");
for (let day = 1;; day++) {
if (!insert_row(my_div, `3/${day}/2025`, 'Foobar etc.')) {
return;
}
for (let thisday = 1; thisday < my_perday; ++thisday) {
let v = "foo ".repeat(thisday * 4);
if (!insert_row(my_div, '', 'Foobar more etc.' + v)) {
return;
}
}
}
}

function insert_row(my_div, col1, col2) {
let my_row = `${col1}
${col2}`;
my_div.innerHTML += my_row;
return --my_limit;
}

/*
* Slideshow_test generates a sequence of five images that are
* inserted into the right panel, scaled proportionally to fit
* the available space.
*
* - 4000x500px exceeds the width of the container
* - 1000x4000px exceeds the height of the container
* - 4000x4000px exceeds both the width and the height of the container.
* - 600x400px should fit within the container without any scaling
* - 100x200px should also fit.  It's included to prove that it isn't scaled up.
*/
const duration = 2000; // time (msec) to display each slide
const min_size = 0; // min file size to select
const max_size = 0; // max file size (0 means no limit)
const sleep = ms => new Promise(r => setTimeout(r, ms));
const sizes = [
/* wd, ht */
[4000, 500],
[1000, 4000],
[4000, 4000],
[600, 400],
[100, 200]
];

async function slideshow_test(duration, min = 0, max = 0) {
let n = 0;

const my_img = document.querySelector('#slide-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 my_randomizer = `https://placehold.co/${w}x${h}/orange/black/png?text=Pre-scaled+size\\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>
:root {
/*
* I don't know of any way to give  the margins I want without
* somehow destroying the "dashboard" appearance, so I set variables
* here and use them in several places to fake it.
*/
--body-margin-sides: 2em;
--body-margin-top: 2em;
--body-margin-bottom: 2em;
--body-background: #dbd2c3;
}

* {
box-sizing: border-box;
}

html,
body {
height: 100%;
}

html {
background: violet;
}

/* BODY and LEFT PANEL are taken from Brett Donald's solution,
https://stackoverflow.com/a/79453218/522385 */
body {
outline: 4px dashed red;
outline-offset: -4px;
background: var(--body-background);
margin: 0 var(--body-margin-sides);
/* side margins only */
display: grid;
overflow: hidden;
/* prevents any body scroll -- good for dashboards */
/* height: 100%; */
/* width: 100% */
/* padding: 0;  */
grid-template-rows: var(--body-margin-top)
/* fake top margin */
auto
/* header */
1fr
/* widget area */
var(--body-margin-bottom);
/* fake bottom margin */
}

fake-body-margin {
background: violet;
}

header {
background: lightgreen;
text-align: center;
}

hr {
display: block;
margin: var(--body-margin-top) auto;
width: 100%;
border: 0;
border-top: 1px dashed black;
}

panels {
display: grid;
gap: 5em;
grid-template-columns: 45fr 55fr;
}

left-panel {
outline: 3px dotted green;
outline-offset: -3px;
display: grid;
grid-template-rows: auto 1fr;
}

left-panel-top {
margin-top: 15px;
/* Gap above Welcome blurb */
line-height: 1.4;
/* line separation is 1.4 x normal */
margin-bottom: 0px;
/* Gap beneath Welcome blurb */
}

left-panel-bottom {
position: relative;
}

left-panel-bottom-content {
background: orange;
border: 0;
border-radius: 5px;
/* border roundedness */
column-gap: 10px;
display: grid;
grid-template-columns: auto auto;
max-height: 100%;
overflow: auto;
/* scroll the overflow */
padding: 0 1em;
position: absolute;
/* prevents content height from affecting the layout*/
width: fit-content;
/* I changed from 100% */
}

/* Hide scrollbar for Webkit browsers */
left-panel-bottom-content::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
left-panel-bottom-content {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}

scrollable-table-col1 {
height: fit-content;
}

scrollable-table-col2 {
height: fit-content;
}

scrollable-table-spacer {
padding-bottom: 6px;
}

/* RIGHT-PANEL is taken from imh's solution */
right-panel {
outline: 4px dotted black;
outline-offset: -4px;
background: yellow;
display: flex;
flex-direction: column;
/* this appears to have no effect */
overflow: hidden;
}

picture-box {
outline: 4px dotted orange;
outline-offset: -4px;
display: flex;
flex: auto;
min-height: 0;
justify-content: center;
/* Centers horizontally */
align-items: center;
/* Centers vertically */
}

.scaled-picture {
outline: 8px double black;
outline-offset: -8px;
max-width: 100%;
/* leave a little breathing room */
max-height: 100%;
}< /code>



Banner






Lorem ipsum odor amet, consectetuer adipiscing elit. Maecenas tempor
proin amet ad consequat tempor praesent facilisis. Tempus potenti
torquent nulla nullam elit class malesuada. Ut platea id ornare,
convallis fusce eros. Fringilla pretium porta phasellus consectetur
fermentum semper mollis. Est imperdiet euismod placerat et venenatis
mattis; magna dictumst integer. Turpis fusce malesuada venenatis diam
nisl quis tempus nostra. In nulla mollis ac nisi turpis consequat arcu
potenti? Inceptos congue potenti at montes erat ac ultricies vel
maximus.  Ridiculus nunc porttitor tortor vulputate; posuere quisque.

Recent site updates: