I’m attempting to scale a canvas to a particular facet proportion that occupies as much space as is readily available in the moms and dad container. Right here’s the HTML:
<< div course=" grid-container">
<> < div course=" grid-item">
<> < h1>> header<.
<.
<< div course=" grid-item">
<> < canvas id=" canvas1"><> .
<< div course=" grid-item">
<> < h1>> footer<.
<.
<.
and also the CSS:
grid-container {
display screen: grid;
grid-template-rows: min-content 1fr min-content;
background-color: white;
space: 1px;
setting: outright;
top: 0;
left: 0;
right: 0;
base: 0;
}
. grid-item {
background-color: blue;
display screen: flex;
justify-content: facility;
align-items: facility;
shade: white;
}
#canvas 1 {
aspect-ratio: 4/3;
object-fit: fit;
background-color: red;
margin: 0;
cushioning: 0;
/ *.
what to establish size and also elevation to??
*/.
}
I'm attempting to make use of object-fit to have the canvas occupy the whole readily available area while preserving the facet proportion, yet it does not. Establishing size or elevation to 100% appears to neglect the aspect-ratio I'm attempting to maintain the whole point on the display as the home window resizes, which is why I'm increasing the grid to occupy the whole area, yet the canvas is not scaling up or down as I would certainly like it to.
I have actually attempted all examples yet no good luck. Any kind of aid would certainly be valued. Many thanks!
Right Here's the Fiddle: https://jsfiddle.net/csells/53bgLw1z/25/
